Question

我一直关注MixItUp website上的文档。

我正在使用WordPress来帮助创建需要过滤的每个项目的类。

这位于我的content-coming-games.php

中

<div class="controls col-md-12">
   <label>Sort By:</label>

   <button class="filter" data-filter="all">All</button>
   <button class="filter" data-filter=".ps4">PS4</button>
   <button class="filter" data-filter=".xbox-one">Xbox One</button>
   <button class="filter" data-filter=".wii-u">Wii U</button>
   <button class="filter" data-filter=".pc">PC</button>
</div>

<?php if(is_post_type_archive( 'upcoming-games' )) {
   $class ='';
   $consoles_slug = wp_get_object_terms( $post->ID,  'consoles' );
   foreach ($consoles_slug as $console_slug) {
   $class .= $console_slug->slug . ' ';
   } }
?>

<div id="upcoming-games-list">
   <div class="mix <?php echo $class ?>">
      Content
   </div>
</div>

这位于我的main.js：

$('#upcoming-games-list').mixItUp({
        animation: {
        enable: true,
        effects: 'fade scale',
        duration: 600,
        easing: 'ease',
        perspectiveDistance: '3000px',
        perspectiveOrigin: '50% 50%',
        queue: true,
        queueLimit: 1,
        animateChangeLayout: false,
        animateResizeContainer: true,
        animateResizeTargets: false,
        staggerSequence: null,
        reverseOut: false
        }
    });

php正在运行，当我检查代码时，它正在输出类，因为我在data-filter中命名了它们。所以问题基本上是，当我点击按钮时，它不会适当地过滤内容。有关实例，请点击here。

Answer 1

默认情况下，CSS应隐藏您的项目。所以，添加它以使其正常工作：

pickle

在DOCs他们说：

在我们开始讨论这个有趣的部分之前，有一条小而重要的CSS规则我们必须添加到项目的样式表中以隐藏目标元素。

#upcoming-games-list > .row > div {
    display: none;
}

»默认情况下，目标元素必须隐藏在项目中样式表。

MixItUp不按类过滤

1 个答案: