我目前在使用 jQuery 同位素插件和 hashchange 函数时遇到了一些问题。我有一个 div 网格,在页面加载时仅显示 grid-block-filter
div,单击其中一个 .grid-block-filter
div 会带来相关内容,将散列附加到 url 以便用户可以从其他地方导航到它,这一切都很好,不过这是我的示例,我将解释我的问题:
jsFiddle(带哈希值):http://jsfiddle.net/neal_fletcher/vcffM/9/show
jQuery:
$(document).ready(function () {
var $container = $('#main-grid');
if (location.hash != "") {
var hashfilter = "." + location.hash.substr(1);
} else {
var hashfilter = "*";
}
$container.imagesLoaded(function () {
$container.isotope({
filter: hashfilter + '.nav-block',
itemSelector: '.grid-block',
animationEngine: 'best-available',
masonry: {
columnWidth: 4
}
});
});
$('.grid-block-filter a').click(function () {
var selector = jQuery(this).attr('data-filter');
var prettyselector = selector.substr(1);
location.hash = prettyselector;
return false;
});
$(window).hashchange(function () {
if (location.hash != "") {
var hashfilter = "." + location.hash.substr(1);
} else {
var hashfilter = "*";
}
$container.imagesLoaded(function () {
$container.isotope({
filter: hashfilter,
itemSelector: '.grid-block',
animationEngine: 'best-available',
masonry: {
columnWidth: 4
}
});
});
});
});
例如,如果您单击 ONE FILTER
,这会很好地引入相关内容,但随后单击后退按钮会返回所有内容,而不仅仅是显示 网格- block-filter
就像页面加载时一样。有没有办法阻止这种情况的发生?我想不通。任何建议将不胜感激!
最佳答案
当用户点击后退按钮时,document.ready
将不会触发。这是您面临的问题的核心。一种方法是将脚本放在页面底部,而不是放在 onload 方法中,以确保它们始终执行。
另一种方法是采用这个 StackOverflow 答案的方法:https://stackoverflow.com/a/170478/1026459
If you set history.navigationMode to 'compatible' then jQuery's ready function will fire on Back button operations
history.navigationMode = 'compatible';
$(document).ready( function(){ /* code */ });
关于jQuery:同位素哈希更改、过滤器和后退按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17393631/