我正在玩isotope进行过滤,这很棒。当用户点击其中一个图像时,它会显示不同的页面(详细信息页面),但过滤其仍然存在的菜单。现在我想要的是当用户再次点击其中一种可能性时,他会回到主页但是已经有了过滤结果。
我已经阅读过这个页面(http://isotope.metafizzy.co/docs/hash-history-jquery-bbq.html),但我承认我没有理解很多东西
我有以下HTML代码,正如他们所建议的那样:
div id="leftMenu">
<span><a href="#filter=*" >All Menus</a></span>
<span><a href="#filter=.pizza" >Pizza </a></span>
<span><a href="#filter=.soda" >Soda </a></span>
<span><a href="#filter=.popcorn" >PopCorn</a></span>
<span><a href="#filter=.beer" >Beer</a></span>
</div>
和以下Js代码
$('#leftMenu span a').click(function() {
// get href attr, remove leading #
var href = $(this).attr('href').replace(/^#/, ''),
// convert href into object
// i.e. 'filter=.inner-transition' -> { filter: '.inner-transition' }
option = $.deparam(href);
// set hash, triggers hashchange on window
console.log('value de href: '+href+ ' || option: '+option);
$.bbq.pushState(recursiveDecoded);
return false;
});
但我在depram函数中遇到错误。它告诉我$ .depram不是函数
我是否必须链接另一个额外的文件以读取depram方法??
任何人都可以帮助我如何完成或理解?
非常感谢编辑 - 我的进步 我找到了两个额外的js文件,我将我的项目链接到它们并使用以下代码
$('#leftMenu span a').click(function() {
// get href attr, remove leading #
var href = $(this).attr('href').replace(/^#/, ''),
// convert href into object
// i.e. 'filter=.inner-transition' -> { filter: '.inner-transition' }
option = $.deparam(href);
// set hash, triggers hashchange on window
$.bbq.pushState(option);
console.log("--> " +option );
//return false;
});
$(window).bind('hashchange', function(event) {
alert('Hello');
// get options object from hash
var hashOptions = $.deparam.fragment();
console.log(hashOptions);
// apply options from hash
$('#leftMenu span a').isotope(hashOptions);
})
// trigger hashchange to capture any hash data on init
.trigger('hashchange');
我没有任何错误。但它不是过滤器。
我可以得到警报('你好')。
任何想法??
答案 0 :(得分:2)
我找到了解决方案。我的js代码出错了。
这是代码
$container.isotope({});
$('#leftMenu span a').click(function() {
// get href attr, remove leading #
var href = $(this).attr('href').replace(/^#/, ''),
// convert href into object
// i.e. 'filter=.inner-transition' -> { filter: '.inner-transition' }
option = $.deparam(href);
// set hash, triggers hashchange on window
$.bbq.pushState(option);
return false;
});
$(window).bind('hashchange', function(event) {
// get options object from hash
var hashOptions = $.deparam.fragment();
// apply options from hash
$container.isotope(hashOptions);
})
// trigger hashchange to capture any hash data on init
.trigger('hashchange');
我认为$container.isotope(hashOptions);
引用了菜单项,但实际上它指的是结果容器。