0

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

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

这位于我的 content-upcoming-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. 所以问题基本上是，当我点击按钮时，它没有适当地过滤内容。如需实时示例，请单击此处。

4

1 回答 1

1

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

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

他们在他们的文档中说：

在我们进入有趣的部分之前，我们必须将一条小而关键的 CSS 规则添加到项目的样式表中以隐藏我们的目标元素。

#Container .mix{
    display: none;
}

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

于 2016-06-17T22:10:21.007 回答