質問: $(this).data("value"); if(isChecked){ activeFilters.push(value); } else { activeFilters.splice(activeFilters.indexOf(value), 1); } userList.filter(function (item) { if(activeFilters.length > 0) { return(activeFilters.indexOf(item.values().filter)) > -1; } return true; }); }); }); ``` ### 現状と問題 サンプルページ(codepen.io) 上記のコードで、複数のチェックボックスにチェックを入れても、同時にソート対象を表示できるようになりました。 しかし、「複数条件の内、ひとつだけでも条件に一致したらソート対象にする」が、意図した動作ができない状況です。 ### 意図した動作 ![意図した動作](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/ea2607049d9e5cd589491bea9f1edc12.jpeg) 「メーカーA」にチェックを入れると、 ・メーカーA ・メーカーAのカテゴリA ・メーカーAのカテゴリB 「複数条件の内、ひとつだけでも条件に一致したらソート対象にする」という意図した動作です。 ### 上手く行かない動作 ![上手く行かない動作](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/b66818927e897df39d41eea80ced1483.jpeg) しかし「カテゴリA」にチェックを入れると、 ・カテゴリA だけがソート対象になり、「メーカーAのカテゴリA」「メーカーBのカテゴリA」がソート対象から除外されてしまいます。 ### 解決したいこと 前者の意図した動作のように、「複数条件の内、ひとつだけでも条件に一致したらソート対象にする」を常に動作するようにしたいです。 ヒント、解決方法等ありましたら、教えていただけると幸いです。よろしくお願いします。
回答: `item.values()`で取得できるカテゴリ一覧は、名前の重複が許されず、最初に記載された値しか参照できないようです。 解決策としては、以下のようにカンマで区切ったカテゴリ名をfilterとして1つの要素にまとめて(必ずしもカンマ区切りでなくても良い)、 ``` maker-a,cat-aメーカーAのカテゴリA ``` filter関数内では`activeFilters`の個々の文字列に対しfilterの中身に部分一致するものがあるかどうかを調査すれば良いかと思います。 ``` // 元のreturn文 // return(activeFilters.indexOf(item.values().filter)) > -1; // itemのfilterに対してactiveFilters中の文字列がindexOfで部分一致するものがあるかチェックし、 // 1つでも存在したらtrueを返すようにする return ( activeFilters.some((e) => item.values().filter.indexOf(e) != -1) ); ``` Codepen Demo.