MixItUp不按类过滤

Question

我一直在跟踪MixItUp网站上的文档。

我使用WordPress帮助在需要过滤的每一项上创建类。

这是位于我的内容-即将到来的-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中将它们命名为类。所以问题基本上是，当我点击按钮时，它没有对内容进行适当的过滤。对于一个活生生的例子，单击这里。

Answer 1

默认情况下，您的项应该由CSS隐藏。因此，添加以下内容以使其正确工作：

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

在他们的博士中他们说：

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

#Container .mix{
    display: none;
}

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