加载内容时取决于哈希 URL 参数
Load content on page load dependant on hash url parameters
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')
相关文章:
- Steam Web API:I'我不知道该如何处理这个看起来像哈希的url来生成图像
- 使用Javascript/jQuery以编程方式将当前锚点/哈希/片段附加到任何表单操作url
- 重定向不带哈希的URL-Ember.JS
- 在我的图库(jQuery)中使用箭头导航时,更改URL中的哈希
- 需要url哈希修复
- 单击引导模式锚点时添加 URL 哈希
- 根据 URL 中的哈希移动 HTML
- 使用Flexslider进行哈希URL导航
- 使用 html5 历史记录代替哈希 URL 来恢复用户的历史记录
- 哈希 URL 参数,MD5 哈希 (PHP)
- 用于对数据进行排序的多个 (2) 个哈希 URL 参数
- 加载内容时取决于哈希 URL 参数
- Div 叠加层淡入历史记录,并可使用哈希 URL 添加书签
- AngularJS并使用使用哈希URL的js / css库
- 如何从哈希 url 获取参数
- 在Backbone.js中组合哈希和非哈希URL
- 使用哈希URL时不需要的页面跳转
- 如何从哈希url使用id更改内容
- 从URL中删除哈希,以无哈希URL加载页面,然后在不重新加载页面的情况下向URL添加哈希
- 正则表达式匹配哈希URL字符串