同一页面上的多个 mixitup 问题

Question

我在同一页面上的两个单独 div 上使用 2 个 mixitup，但是在过滤任何 div 时，它会在其他 mixitup display: none 上应用 div.为了更清楚地说明，我添加了一个代码笔 link。

访问：https://codepen.io/hmajid/pen/NwKYer?editors=1000

任何帮助将不胜感激。

谢谢

Answer 1

实际上，我们必须为每个块（#Container，#Container2）提供一个唯一的按钮过滤器

请找我的密码笔link 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; 
}

同一页面上的多个 mixitup 问题

Issue with multiple mixitup on same page

jquery

mixitup