加载页面加载内容依赖于哈希url参数

Question

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

我在想，如果我可以创建一个像，如果下面的语句：

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'), 
 
\t 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; 
 

 
\t $(location).attr('hash', combinedProps); 
 

 
\t } 
 

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

 
})(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')