jquery - 同一页面上的多个混音问题

Question

我在两个单独的 div 上的同一页面上使用 2 mixitup，但是在过滤任何 div 时，它将应用于display: none其他 mixitup div。为了更清楚，我添加了一个 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; 
}