Wordpress：同位素转换按钮什么也不做

Question

我正在尝试在 wordpress 上使用 Isotope 和 Woocommerce 制作带有类别的动态产品库，但我被卡住了，因为当我点击它们时按钮没有做任何事情并且控制台没有显示任何错误，我无法弄清楚为什么它不起作用。

我正在使用带有方舟主题、bootstrap v4 和 jquery 版本 2.2.4 的 wordpress 5.2.2。我尝试使用不同的 jquery 版本，我也尝试在干净的本地 wordpress 安装中重做所有内容，但我有一些 Animsition 错误。

这是在 php 中构建画廊的方法：

function gallery(){

    Print "<div class='button-group filter-button-group'>

            <button data-filter='*' >show all</button>

            <button data-filter='.music-album'>Music</button>

            <button data-filter='.movie-soundtrack'>Movies</button>

            <button data-filter='.game-soundtrack'>Games</button>

            </div>";

    Print"<div class='row'>";

    $articles = new WP_Query(['post_type'=>'product']);

    if($articles->have_posts()) : while ($articles->have_posts()) : $articles->the_post();

        $product_cats = wp_get_post_terms( get_the_ID(), 'product_cat' );

        $single_cat = array_shift( $product_cats );

        $category = $single_cat->slug.' ';

        Print"<a class='grid-item ".$category."' href='".get_the_permalink()."'>";

        Print"<div class='card grid-item".$category."'>";

            Print"<img class='card-img-top'src='".get_field('image')."'alt='' width='200' height='200'>";

            Print"<h1 class='card-body'>"; the_title(); Print"</h1>";

        Print"</div>";

        Print"</a>";

    endwhile;endif; 

    Print"</div>";

}

这是 javascript ：

jQuery.noConflict();

var $grid = jQuery('.grid').isotope({

  // options

  itemSelector: '.grid-item',

  layoutMode: 'fitRows'

});

jQuery('.filter-button-group').on('click', 'button', function() {

  var filterValue = jQuery(this).attr('data-filter');

  console.log(filterValue); // for tests

  $grid.isotope({ filter: filterValue });

});

这些按钮应该按类别对产品进行转换，但当我点击它时，它根本不排序任何东西，控制台也不会返回任何 Error 。

Answer 1

正如@Manjunath 所说，我的“项目”不是我想要排序的网格的一部分。所以我只需要在我的 galery div 类中添加“grid”。