在頁面上加載內容取決於哈希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')