Question

在Wordpress CMS上使用Isotope时，我想请求您帮助过滤选项。

我有几个过滤内容的链接，整个系统使用Advanced Custom Fields Pro作为reapeater插入Wordpress，但基本上我已经粘贴了html输出。

整个问题是我无法过滤我的块，但其他一切都运行正常。

我很乐意提供任何帮助！

PHP：

function my_masonry(){
    wp_enqueue_script('masonry');
    wp_enqueue_script('isotope');
}

add_action('wp_enqueue_scripts', 'my_masonry');

HTML：

<div class="button-group filters-button-group">
    <button class="button is-checked" data-filter="*">Pokaż wszystkie</button>
    <button class="button" data-filter=".Komercyjne">Komercyjne</button>
    <button class="button" data-filter=".Niekomercyjne">Niekomercyjne</button>
</div>

<div id="container" class="js-masonry">
    <div class="item element-item Wnętrza" data-category="Wnętrza">
        <a href="#"><img class="photo" src="#"></a>
    </div>
    <div class="item element-item Elewacje" data-category="Elewacje">
        <a href="#"><img class="photo" src="#"></a>
    </div>
    <div  class="item element-item Komercyjne" data-category="Komercyjne">
        <a href="#"><img class="photo" src="" /></a>
    </div>
    <div  class="item element-item Niekomercyjne" data-category="Niekomercyjne">
        <a href="#"><img class="photo" src="#"></a>
    </div>
    <div class="item element-item" data-category="">
        <a href="#"><img class="photo" src="#"></a>
    </div>
</div>

CSS：

.photo {
    width: 200px;
    height: 200px;
    display: inline-block;
    background: #000;
}

JS：

jQuery(document).load(function($) {
    var $grid = $('#container');
    $grid.isotope({
        layoutMode: 'masonry',
        itemSelector : '.item',
        filter: '*',
        animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: false
        },
        masonry: {
            columnWidth: 350,
            gutter: 30
        }
    });

    // bind filter button click
    $('.filters-button-group').on('click', 'button', function() {
        $(this).addClass('current');

        var selector = $(this).attr('data-filter');
        $container.isotope({
            filter: selector,
            animationOptions: {
                duration: 750,
                easing: 'linear',
                queue: false
            }
        });

        return false;
    });

    // change is-checked class on buttons
    $('.button-group').each(function(i, buttonGroup) {
        var $buttonGroup = $( buttonGroup );

        $buttonGroup.on('click', 'button', function() {
          $buttonGroup.find('.is-checked').removeClass('is-checked');
          $(this).addClass('is-checked');
        });
    });
});

Answer 1

我的代码只做了两处小改动。

首先，我已将load()事件切换为ready()事件，这使同位素插件初始化。

jQuery(document).ready(function() {

之后，在您的点击事件中，我刚刚更改了您的var $container（不存在）以获取正确的var $grid（包含您的容器），所有内容似乎都在现在就工作。

在此处查看：JSFiddle。

希望它有所帮助！

与砌体同位素不过滤

1 个答案: