質問: 1ページ内に並び替えができるコンテンツを複数設置したいと考えています。 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内のトリガーの記述でうまくすみ分けができればと考えているのですが、そもそも可能なのでしょうか? ご回答よろしくお願いします。 以下はソースです。 All ナビ1 ナビ2 ナビ1のコンテンツ ナビ2のコンテンツ All ナビ3 ナビ4 ナビ3のコンテンツ ナビ4のコンテンツ
回答: ドキュメントに以下のようにありましたので、 > > 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' } }); ``` サンプル