加载内容时取决于哈希 URL 参数

Load content on page load dependant on hash url parameters

本文关键字:哈希 URL 参数 取决于 加载      更新时间:2023-09-26

Jquery/Javascript 新手试图弄清楚如何在页面上加载依赖于多个 window.location.hash 参数的内容。

我想知道我是否可以创建一个如下所示的 if 语句:

    if (window.location.hash){          
    $('li[data-style"' + style + '"]', '#options > ul').trigger('click');
}
else {
    $('li:first', '#options > ul').trigger('click');
    }

else 语句有效,但我无法让 if 语句工作。完整代码如下

<script>
(function($) {
  var urlprops = {};
  $('#options > ul').on('click', 'li', function() {
    var $this = $(this).addClass('selected'),
      imgId = $this.parent('ul').data('img'),
      img = $(imgId),
      cat = $this.data('cat'),
      style = $this.data('style'),
	  desc = $this.text();
    $this.siblings().removeClass('selected')
    img.attr('src', '/' + cat + '/' + style + '.png').attr('alt', 'tool ' + desc);
    urlprops[cat] = style;
    buildURL();
  });
  function buildURL() {
   
    var combinedProps = $.param(urlprops),
      baseUrl = window.location.href,
      finalUrl = baseUrl + '#' + combinedProps;
	$(location).attr('hash', combinedProps); 
	}
   	if (window.location.hash){			
		$('li[data-style"' + style + '"]', '#options > ul').trigger('click');
	}
	
	else {
		$('li:first', '#options > ul').trigger('click');
		}
})(jQuery);
</script>
.selected {
  background: red;
}
#url {
  color: blue;
  font-size: 11px;
}
<h3>
URL = <span id="url"></span>
</h3>
<h3>
images
</h3>
<img id="wallImg" src="/testpath/selwall/nopaint.jpg" />
<img id="doorImg" src="/testpath/selwall/nopaint.jpg">
<img id="handleImg" src="/testpath/selwall/nopaint.jpg">
<img id="topImg" src="/testpath/selwall/nopaint.jpg">
<img id="floorImg" src="/testpath/selwall/nopaint.jpg">
<h3>
options
</h3>
<div id="options">
  <ul class="selDoor" data-img="#doorImg">
    <li data-cat="door" data-style="white">White Door</li>
    <li data-cat="door" data-style="red">Red Door</li>
    <li data-cat="door" data-style="yellow">Yellow Door</li>
  </ul>
  <ul class="selHandle" data-img="#handleImg">
    <li data-cat="handle" data-style="round">Round Knob</li>
    <li data-cat="handle" data-style="cup">Cup Handle</li>
    <li data-cat="handle" data-style="bar">Bar Handle</li>
  </ul>
  <ul class="selTop" data-img="#topImg">
    <li data-cat="top" data-style="wood">Wood Top</li>
    <li data-cat="top" data-style="plastic">Plastic top</li>
    <li data-cat="top" data-style="stone">Stone top</li>
  </ul>
  <ul class="selFloor" data-img="#floorImg">
    <li data-cat="floor" data-style="wood">Wood Floor</li>
    <li data-cat="floor" data-style="tile">Tile Floor</li>
    <li data-cat="floor" data-style="laminate">Laminate Floor</li>
  </ul>
  
  <ul class="selWall" data-img="#wallImg">
    <li data-cat="wall" data-style="bluepaint">Blue Walls</li>
    <li data-cat="wall" data-style="redpaint">Red Walls</li>
    <li data-cat="wall" data-style="greenpaint">Green Walls</li>
  </ul>
  
</div>

关于我的问题的任何指示将不胜感激。

您忘记了选择器中的=

$('li[data-style="' + style + '"]', '#options > ul')