MixItUp не фильтрует по классам

Question

Я следил за документами на сайте 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, Таким образом, проблема в том, что когда я нажимаю на кнопку, она не фильтрует содержимое соответствующим образом. Для живого примера, нажмите здесь.

Answer 1

По умолчанию ваши предметы должны быть скрыты с помощью CSS. Итак, добавьте это, чтобы оно работало правильно:

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

В своих документах они говорят:

Прежде чем мы перейдем к забавной части, есть одно небольшое, но важное правило CSS, которое мы должны добавить в таблицу стилей нашего проекта, чтобы скрыть наши целевые элементы.

#Container .mix{
    display: none;
}

"Целевые элементы должны быть скрыты по умолчанию в таблице стилей вашего проекта.