【JS】mixitupを同一ページに複数設置する方法

Question

１ページ内に並び替えができるコンテンツを複数設置したいと考えています。
mixitup.js（https://github.com/patrickkunka/mixitup）を使って再現しようと思っているのですが、単体ですと動作するのですが、
複数設置するとナビのボタンを押すと別のコンテンツに影響がでてしまう状態です。

例えば、test-container1内の「ナビ1のコンテンツ」をクリックすると、
希望の動作としてはtest-container1内ではcont-01クラスがついたナビ1のコンテンツのみが表示される。
そしてtest-container2内のコンテンツは変化なし。
しかし、現状はtest-container1内の「ナビ1のコンテンツ」をクリックすると、
test-container1内のcont-01クラスがついたナビ1のコンテンツが表示される。
さらに、test-container2内のコンテンツが非表示になる。（display:none;がついた状態）
となってしまいます。並び替えの対象を別にしたいのですが、連動してしまっている状況です。

script内のトリガーの記述でうまくすみ分けができればと考えているのですが、そもそも可能なのでしょうか？
ご回答よろしくお願いします。

以下はソースです。

<!-- test-container1 start --> <div class="test-container1"> <!-- filter-nav start --> <div class="filter-nav"> <button type="button" class="control" data-filter="all">All</button> <button type="button" class="control" data-filter=".cont-01">ナビ1</button> <button type="button" class="control" data-filter=".cont-02">ナビ2</button> </div> <!-- filter-nav end --> <!-- content start --> <div class="mix cont-01">ナビ1のコンテンツ</div> <div class="mix cont-02">ナビ2のコンテンツ</div> <!-- content end --> </div> <!-- content end --> </div> <!-- test-container1 end --> <!-- test-container2 start --> <div class="test-container2"> <!-- filter-nav start --> <div class="filter-nav"> <button type="button" class="control" data-filter="all">All</button> <button type="button" class="control" data-filter=".cont-03">ナビ3</button> <button type="button" class="control" data-filter=".cont-04">ナビ4</button> </div> <!-- filter-nav end --> <!-- content start --> <div class="mix cont-03">ナビ3のコンテンツ</div> <div class="mix cont-04">ナビ4のコンテンツ</div> <!-- content end --> </div> <!-- content end --> </div> <!-- test-container2 end --> <script src="js/mixitup.min.js"></script> <script> var containerEl = document.querySelector('.test-container1'); var mixer = mixitup(containerEl); var containerEl2 = document.querySelector('.test-container2'); var mixer2 = mixitup(containerEl2); </script>

Answer 1

ドキュメントに以下のようにありましたので、

When set to 'local', MixItUp will only query (or bind click events to) its own container element. This may be desireable if you require multiple active mixer instances within the same document, with controls that would otherwise intefere with each other if scoped globally.

scope | mixitup/mixitup.Config.md at v3 · patrickkunka/mixitup · GitHub

こうかな、と思います。

var mixer = mixitup(containerEl,{
    controls: {
        scope: 'local'
    }
});

サンプル

Comments

[k_tora]

ご回答ありがとうございます！
正に希望の動作です。
こういうオプションがあったことを知りませんでした。
勉強になりました。感謝いたします！