gpt4 book ai didi

jquery - 实现同位素过滤器(基本)

转载 作者:行者123 更新时间:2023-12-01 01:07:45 29 4
gpt4 key购买 nike

我正在尝试对 WordPress 安装的新闻部分实现同位素过滤。我是 JavaScript/jQuery 的新手,正在尝试随时随地学习。我首先使用 Filters section of the Isotope website 中提供的代码.

由于运气不佳,我开始谷歌搜索。在 Stack Overflow 上我发现 Implementing isotop filtering portfolio with wordpress看起来很有希望,但没有得到回应。然后我发现Implementing jQuery isotope 。我想,哇,好吧,同样的问题。回答了。伟大的。

...但我的兴奋很快就变得更加沮丧。经过几个小时的修补之后,我仍然坐在这里,没有任何东西可以展示。

我的简单问题是,我做错了什么/遗漏/不理解

预先感谢您的帮助,健忘的詹姆斯

HTML 输出

<div id="grid_page">
<ul id="isotope_filters">
<li><a data-filter="*" href="#">show all</a></li>
<li><a data-filter="event-planning" href="#">event planning</a></li>
<li><a data-filter="marketing" href="#">marketing</a></li>
<li><a data-filter="site-survey" href="#">site survey</a></li>
</ul>

<ul id="isotope_container">
<li class="isotope_selector event-planning marketing">
<a href="./link-1/"></a>
<div class="caption">
...
</div>
</li>
<li class="isotope_selector site-survey">
<a href="./link-2/"></a>
<div class="caption">
...
</div>
</li>
<li class="isotope_selector event-planning marketing">
<a href="./link-3/"></a>
<div class="caption">
...
</div>
</li>
<li class="isotope_selector marketing">
<a href="./link-4/"></a>
<div class="caption">
...
</div>
</li>
</ul>
</div>

JavaScript

<script type="text/javascript">

$(window).load(function()

// cache container
var $container = $('#isotope_container');

// initialize isotope
$container.isotope({
// options...
animationEngine: 'best-available',
itemSelector: '.isotope_selector'
});

// filter items when filter link is clicked
$('#isotope_filters li a').on('click', function() {
var selector = $(this).data('filter');
$container.isotope({
filter: selector
});

});
</script>

最佳答案

您只是缺少一个左大括号(以及您找到的选择器上的 .):

<script type="text/javascript">

$(window).load(function() { <<<<

// cache container
var $container = $('#isotope_container');

// initialize isotope
$container.isotope({
// options...
animationEngine: 'best-available',
itemSelector: '.isotope_selector'
});

// filter items when filter link is clicked
$('#isotope_filters li a').on('click', function() {
var selector = $(this).data('filter');
$container.isotope({
filter: selector
});

});
</script>

关于jquery - 实现同位素过滤器(基本),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18856326/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com