5

我正在尝试在 WordPress 安装的新闻部分实现同位素过滤。我是 JavaScript / jQuery 的新手，我正在努力学习。我首先使用Isotope 网站的 Filters 部分中提供的代码。

没有运气，我开始用谷歌搜索。在 Stack Overflow 上，我发现使用 wordpress 实现同位素过滤组合，看起来很有希望，但没有任何回应。然后我找到了实现 jQuery isotope。我想，哇，好吧，同样的问题。回答。伟大的。

...但我的兴奋很快变成了更多的沮丧。经过几个小时的修补，我仍然坐在这里，没有任何东西可以展示。

我的简单问题是，我在做什么错/错过/不理解？

提前感谢您的帮助，forgetfuljames

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>
4

2 回答 2

3

您只是缺少一个左大括号（以及您找到的选择器上的 .）：

<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>
于 2013-09-17T18:09:42.187 回答
3

对于这个问题的未来访问者，我让代码工作（没有 Css）

代码片段

$(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 src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://npmcdn.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
<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">
          ----> event-planning marketing  <-----
        </div>
    </li>
    <li class="isotope_selector site-survey">
        <a href="./link-2/"></a>
        <div class="caption">
           ----> site-survey  <-----
        </div>
    </li>
    <li class="isotope_selector event-planning marketing">
        <a href="./link-3/"></a>
        <div class="caption">
           ----> event-planning marketing  <-----
        </div>
    </li>
    <li class="isotope_selector marketing">
        <a href="./link-4/"></a>
        <div class="caption">
           ----> marketing  <-----
        </div>
    </li>
</ul>
</div>

于 2017-01-20T03:46:03.763 回答