jQueryを使ってコンテンツの表示非表示を制御したい

Question

初投稿ですので、なれない点も多いですがご了承ください。

前提・実現したいこと

商品が一覧されている状態から、
[赤][黄色][緑]のボタンを押した時、対応する商品を表示したい。
各商品には複数の色を持っている場合がある。

該当のソースコード

<style>
  .buttonWrap button {
    display: inline-block;
    padding: 3px;
    cursor: pointer;
  }
  .buttonWrap button.is-active {
    color: white;
    background-color: black;
  }
  .is-hide {
    display: none;
  }
</style>

<div class="buttonWrap">
  <button data-group="red">赤</button>
  <button data-group="yellow">黄色</button>
  <button data-group="green">緑</button>
</div>
<ul class="list">
  <li class="line" data-group='{"red","green"}'>商品１</li>
  <li class="line" data-group="red">商品２</li>
  <li class="line" data-group="yellow">商品３</li>
  <li class="line" data-group='{"red","green"}'>商品４</li>
  <li class="line" data-group="green">商品５</li>
</ul>

<script>
  var searchItem = ".buttonWrap button";
  var listItem = ".line";
  var hideClass = "is-hide";
  var activeClass = "is-active";

  var groupAry = $(".line").attr("data-group"); //data-groupを配列取得

  $(function () {
    // 絞り込みを変更した時
    $(searchItem).on("click", function () {
      $(searchItem).removeClass(activeClass);
      var group = $(this).addClass(activeClass).data("group");
      search_filter(group);
    });
  });

  function search_filter(group) {
    // 非表示状態を解除
    $(listItem).removeClass(hideClass);
    // 値が空の場合はすべて表示
    if (group === "") {
      return;
    }
    // リスト内の各アイテムをチェック
    for (var i = 0; i < $(listItem).length; i++) {
      // アイテムに設定している項目を取得
      var itemData = $(listItem).eq(i).data("group");

      // 絞り込み対象かどうかを調べる
      if (itemData !== group) {
        $(listItem).eq(i).addClass(hideClass);
      }
    }
  }
</script>

試したこと

参考１のサイトを見て単一の色を持つ場合は実装することができました。
しかし、複数のデータを保持させた場合うまく実装できませんでした。
そのため、参考２を見て複数のデータを保有できるような形で記載しました。

  var groupAry = $(".line").attr("data-group"); //data-groupを配列取得

このような形で取得、 itemDataの代わりに入れてみたのですが、うまくいきませんでした。

うまくdata-groupが取得できていないことが原因かなと思っているのですが、解決策やヒントなどを教えていただけると助かります。
よろしくお願いいたします。

補足情報

HTML CSS jQuery3.4.1　記述しています。

参考にしたサイト

参考１・・・選択した項目で絞り込み検索をする
https://www.tam-tam.co.jp/tipsnote/javascript/post14636.html

参考２・・・HTMLのデータ属性の配列として格納する
https://qiita.com/yamikoo@github/items/e70b979af9b60876b785

Answer 1

取得できてますよ。

      var itemData = $(listItem).eq(i).data("group");
      console.log(itemData)

{"red","green"}
red
yellow
{"red","green"}
green

itemData は一部オブジェクト形式なので単なる文字列であるgroupとの比較では必ずfalseになります。

オブジェクトなら、「その中に含むか」でチェックする必要があります。
しかし、「複数ある”可能性がある”」のでしたら、全て配列形式で定義したほうが良いでしょう。

  <li class="line" data-group='{"red","green"}'>商品１</li>
  <li class="line" data-group='{"red"}'>商品２</li>
  <li class="line" data-group='{"yellow"}'>商品３</li>
  <li class="line" data-group='{"red","green"}'>商品４</li>
  <li class="line" data-group='{"green"}'>商品５</li>

としたうえで、例えばこう

      // 絞り込み対象かどうかを調べる
      if (itemData.indexOf(group) === -1) {
        $(listItem).eq(i).addClass(hideClass);
      }

しかし、key:valueになってないなら{}より[]のほうが望ましいと個人的には思います。

Comments

[maki042]

回答ありがとうございます。
取得できていないと思っており、すいませんでした。
私の確認不足でした。

回答者様のおっしゃる通り、「複数ある”可能性がある”」という場合ですので、すべて配列で定義し、key:valueになっていないため、{}より[]で記述することにしました。
初心者ですので、細かい記述のことまで教えて下さりありがとうございます。
とても勉強になりました。

[m.ts10806]

プログラムから扱いやすい定義や構成にするのも実装前に考えることのひとつです。
コードや手順は長ければ長くなるほどバグが入り込みやすくなります。

Answer 2

jQueryのdataは配列風に値を書くと、配列として取り出せる特徴があります

<script>
$(function(){
  var groups=$('.line').map(function(){
    return [$(this).data('group')];
  }).get();
  console.log(groups);
});
</script>

<ul class="list">
  <li class="line" data-group='["red","green"]'>商品１</li>
  <li class="line" data-group='["red"]'>商品２</li>
  <li class="line" data-group='["yellow"]'>商品３</li>
  <li class="line" data-group='["red","green"]'>商品４</li>
  <li class="line" data-group='["green"]'>商品５</li>
</ul>

上記性質を活かすとこう

<script>
$(function(){
  $('button[data-group]').on('click',function(){
    var group=$(this).data('group');
    $('.line').hide().filter(function(){
      return $.inArray(group,$(this).data('group'))>-1;
    }).show();
  });
});
</script>
<div class="buttonWrap">
  <button data-group="red">赤</button>
  <button data-group="yellow">黄色</button>
  <button data-group="green">緑</button>
</div>
<ul class="list">
  <li class="line" data-group='["red","green"]'>商品１(rg)</li>
  <li class="line" data-group='["red"]'>商品２(r)</li>
  <li class="line" data-group='["yellow"]'>商品３(y)</li>
  <li class="line" data-group='["red","green"]'>商品４(rg)</li>
  <li class="line" data-group='["green"]'>商品５(g)</li>
</ul>

Comments

[maki042]

回答ありがとうございます。

dataを配列で使用したことがなかったため、配列として取得したのちに取り出す方法がわかりませんでした。
また、dataの取得する記述以外にも自分が長々と書いていた記述がここまで短くできる事に感動しました。
jQueryをもっと有効活用できるようにこれから勉強をしていこうと思います。
ありがとうございました。