Question

我在两个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; 
}

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

1 个答案: