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

Question

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>

对我的问题的任何指示都将不胜感激。

Answer 1

您忘记了选择器中的=：

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