我正在尝试在WordPress安装的新闻部分实施同位素过滤。我是JavaScript / jQuery的新手,正在尝试随时随地学习。我首先使用Isotope网站“过滤器”部分提供的代码。
没有运气,我开始谷歌搜索。在Stack Overflow上,我发现用wordpress实现isotop过滤产品组合看起来很有希望,但没有任何回应。然后我发现了实现jQuery同位素。我以为哇,完全一样的问题。回答。大。
...但是我的兴奋很快变得更加沮丧。经过数小时的修补,我仍然坐在这里,没有任何东西可做。
我的简单问题是,我在做什么错/缺少/不理解?
在此先感谢您的帮助,
<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>
<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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句