Wordpress:同位素转换按钮什么都不做
Wordpress : Buttons for isotope transition does nothing
我正在尝试在 wordpress 上使用 Isotope 和 Woocommerce 制作一个包含类别的动态产品画廊,但我被卡住了,因为当我点击按钮时按钮没有任何反应,控制台没有显示错误,我无法弄清楚为什么它不起作用。
我正在使用带有方舟主题的 wordpress 5.2.2,bootstrap v4 和 jquery 版本 2.2.4。我试过使用不同的 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 });
});
这些按钮应该按带有过渡的类别对产品进行排序,但是当我单击它时它根本没有对任何内容进行排序并且控制台没有 return 任何错误。
正如@Manjunath 所说,我的 "items" 不是我想要排序的网格的一部分。所以我只需要将 "grid" 添加到我的画廊 div 的 class .
谢谢你 Manjunath!
我正在尝试在 wordpress 上使用 Isotope 和 Woocommerce 制作一个包含类别的动态产品画廊,但我被卡住了,因为当我点击按钮时按钮没有任何反应,控制台没有显示错误,我无法弄清楚为什么它不起作用。
我正在使用带有方舟主题的 wordpress 5.2.2,bootstrap v4 和 jquery 版本 2.2.4。我试过使用不同的 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 });
});
这些按钮应该按带有过渡的类别对产品进行排序,但是当我单击它时它根本没有对任何内容进行排序并且控制台没有 return 任何错误。
正如@Manjunath 所说,我的 "items" 不是我想要排序的网格的一部分。所以我只需要将 "grid" 添加到我的画廊 div 的 class .
谢谢你 Manjunath!