同じページに複数のmixitupの問題

Question

2つのsperate divの同じページで2つのmixitupを使用していますが、divのいずれかのフィルタでは他のmixitup divにdisplay: noneが適用されます。より明確にするために、私はcodepenリンクを追加しています。

ログイン：https://codepen.io/hmajid/pen/NwKYer?editors=1000

すべてのヘルプは理解されるであろう。

おかげ

実際

Answer 1

は、我々は、各ブロック（#Container、＃にcontainer2）

見つけてください私のコードペンリンク https://codepen.io/AnkitPandey007/pen/qVWKLj

JSのためのボタンのユニークなフィルタを提供する必要があります。

$(document).ready(function() { 
    $('#Container').mixItUp({ 
    selectors: { 
     filter: '.filter' 
    } 
    }); 

    $('#Container2').mixItUp({ 
    selectors: { 
     filter: '.filter2' 
    } 
    }); 
}); 

HTML：

<div id="Container"> 
    <div style="background: blue;" class="mix category-1" data-my-order="1"> ... </div> 
    <div style="background: blue;" class="mix category-1" data-my-order="2"> ... </div> 
    <div class="mix category-2" data-my-order="3"> ... </div> 
    <div class="mix category-2" data-my-order="4"> ... </div> 
</div> 

<button class="filter" data-filter=".category-1">Category 1</button> 
<button class="filter" data-filter=".category-2">Category 2</button> 



<div id="Container2"> 
    <div style="background: blue;" class="mix test-1" data-my-order="5"> ... </div> 
    <div style="background: blue;" class="mix test-1" data-my-order="6"> ... </div> 
    <div class="mix test-2" data-my-order="7"> ... </div> 
    <div class="mix test-2" data-my-order="8"> ... </div> 
</div> 
<button class="filter2" data-filter=".test-1">Tes1 1</button> 
<button class="filter2" data-filter=".test-2">Test2 2</button> 

CSS：

#Container2 .mix, #Container .mix{ 
    display: none; 
    background: red; 
    width: 100px; 
    height: 100px; 
}