MixItUp 未按类过滤

Question

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

我正在使用 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 中命名的那样。所以问题基本上是，当我点击按钮时，它没有适当地过滤内容。如需实例，请单击 here。

Answer 1

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

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

他们在 DOCs 中说：

Before we get to the fun part, there’s one small but crucial CSS rule we must add to our project’s stylesheet to hide our target elements.

#Container .mix{
    display: none;
}

» Target elements must be hidden by default in your project's stylesheet.

MixItUp 未按类过滤

MixItUp not filtering by classes

javascript

jquery

mixitup

MixItUp 未按 类 过滤

MixItUp not filtering by classes

javascript

jquery

mixitup

MixItUp 未按类过滤