MixItUpはクラスでフィルタリングされていません

Question

私はMixItUp websiteのドキュメントに従っています。

私はWordPressを使用して、フィルタリングが必要な各項目のクラスを作成しています。

これは、これは私のmain.jsに位置しており、私のコンテンツの今後の-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> 

に配置されています。私はそれがだ、コードを検査する際

$('#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で非表示にする必要があります。だから、それを正しく動作させるためにこれを追加します。そのDOCsで

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

を彼らは言う：私たちは楽しい部分に入る前に

は、1つの小さいながらも重要なCSSルール があります私たちは私たちに追加する必要がありますターゲット要素を隠すためのプロジェクトのスタイルシート。ターゲット要素»

#Container .mix{ 
    display: none; 
} 

プロジェクトの スタイルシートでは、デフォルトで非表示にする必要があります。