场景web应用程序工作流如下:
- 有人将
a href
元素单击到页面中http://example.org/ - 点击链接,然后访问网站内的另一个页面http://example.org/page-2/
- 链接URL还包含一个散列变量
(这个hash var是我想要使用的,以实现下一点(
- 有一个内容网格必须显示想要的部分,这个对象是用开箱即用的CMS构建的,所以我最好不想修改它。这也只有当用户点击按钮过滤器时才有效
(这个过滤器完全基于事件,而不是"GUI可见"位置,因此我无法从url中调用特定的过滤器,前一个对象-有一个前一个物体,是的-与url中的哈希值配合得很好,但新的没有。(
- 内容网格过滤器元素没有任何id,它们只有一个要标识的数据自定义属性
就是这样。
解决方法如下:
$( window ).load(function() {
var filter = window.location.hash.substr(1);
if(filter == "keywordA") {
$('a[data-filter=".cat-1"]').trigger('click');
}
if(filter == "keywordB"){
$('a[data-filter=".cat-2"]').trigger('click');
}
if(filter == "keywordC"){
$('a[data-filter=".cat-3"]').trigger('click');
}
if(filter == "keywordD"){
$('a[data-filter=".cat-4"]').trigger('click');
}
if(filter == "keywordE"){
$('a[data-filter=".cat-5"]').trigger('click');
}
});
然后,黑暗和未知的力量出现了,因为当我在地址栏中输入时:http://example.org/page-2/#keywordD正如预期的那样,DOM运行良好。内容网格显示的正是我想要的内容。
但当我试图从中的a href
元素到达同一链接时http://example.org/它根本没有任何作用。
进一步解释
我使用window.load
是因为这样,一旦在DOM中解决了所有问题,并且在$(document).ready()
函数的每个代码实例之后,就会强制执行该函数,因为网站已经可以使用其中的许多函数了。
问题如下:从链接导航时http://example.org/page-2/#指向一个不同的链接,该链接是同一个页面,但具有不同的hash var,如http://example.org/page-2/#keywordD,网站实际上并没有重新加载。这是默认行为,因为它意味着跳转到页面上具有哈希id的元素。
幸运的是,网站上有一个哈希更改事件。
'onhashchange'
现在,根据您的过滤工作方式,您可能需要调用一个执行所有过滤的函数(加载页面时执行过滤的函数(,或者,如果这是服务器端CMS,您可能想要重新加载页面。
$(window).bind('hashchange', function(e) {
// Enter your filter function here
doFiltering();
});
或者如果重新加载页面更合适。
$(window).bind('hashchange', function(e) {
document.location.reload();
});
我不太明白你所说的"这个过滤器完全基于事件,而不是‘GUI可见’位置"是什么意思,所以如果我误解了你,你可能想在评论中详细说明一下,但我希望这些解决方案中的任何一个都适用。
答案
不知怎的,我在附加处理程序之前就触发了该事件,尽管window.load事件应该是在所有DOM完全加载时触发函数的。
https://stackoverflow.com/a/2060275/1126953
向诺亚致敬。
根据之前的答案,我可以设法设置所需的行为如下:
$( window ).load(function() {
setTimeout(function() {
var filter = window.location.hash.substr(1);
if(filter == "keywordA") {
$('a[data-filter=".cat-1"]').trigger('click');
}
if(filter == "keywordB"){
$('a[data-filter=".cat-2"]').trigger('click');
}
if(filter == "keywordC"){
$('a[data-filter=".cat-3"]').trigger('click');
}
if(filter == "keywordD"){
$('a[data-filter=".cat-4"]').trigger('click');
}
if(filter == "keywordE"){
$('a[data-filter=".cat-5"]').trigger('click');
}
},10);
});
只是一个简单的延迟。
非常感谢你抽出时间Stefan。