data属性の値を複数指定したい

Question

実現したいこと

data属性を複数指定し、指定された値のどれか一つでも該当すれば表示させる

発生している問題・分からないこと

チェックボックスによる絞り込み機能を実装しているのですが、data属性に値を複数指定すると表示されなくなり、どのようにしたら複数指定できるようになるのか分かりません。
data-category='["name", "name"]'
のような指定方法は試してみましたがダメでした。

該当のソースコード

var searchBox = '.search-box';
var searchItem = '.search-box input';
var listItem = '.product_item'
var hideClass = 'is-hide';

$(function() {
   $(document).on('change', searchBox + ' input', function() {
    search_filter();
  });
});

function search_filter() {
  $(listItem).removeClass(hideClass);
  for (var i = 0; i < $(searchBox).length; i++) {
    var name = $(searchBox).eq(i).find('input').attr('name');
    var searchData = get_selected_input_items(name);
    if(searchData.length === 0 || searchData[0] === '') {
      continue;
    }
    for (var j = 0; j < $(listItem).length; j++) {
      var itemData = get_setting_values_in_item($(listItem).eq(j), name);
      var check = array_match_check(itemData, searchData);
      if(!check) {
        $(listItem).eq(j).addClass(hideClass);
      }
    }
  }
}

function get_selected_input_items(name) {
  var searchData = [];
  $('[name=' + name + ']:checked').each(function() {
    searchData.push($(this).val());
  });
  return searchData;
}

function get_setting_values_in_item(target, data) {
  var itemData = target.data(data);
  if(!Array.isArray(itemData)) {
    itemData = [itemData];
  }
  return itemData;
}

function array_match_check(arr1, arr2) {
  var arrCheck = false;
  for (var i = 0; i < arr1.length; i++) {
    if(arr2.indexOf(arr1[i]) >= 0) {
      arrCheck = true;
      break;
    }
  }
  return arrCheck;
}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

解決できませんでした。

補足

特になし

Answer 1

  var itemData = target.data(data);
  if(!Array.isArray(itemData)) {
    itemData = [itemData];
  }

カスタム属性は単一の文字列でしかないので、自分のコードで split() やJSON.parse() などする必要があります。

  // data-category='name,name' のように指定した場合
  var itemData = target.data(data).split(',');

Comments

[juner]

jquery の data() メソッドは 内部の文字列パターンによって 任意の型に変換して返すのでわざわざこちら側から型の変換のアプローチは不要ではないでしょうか？
https://api.jquery.com/data/

[int32_t]

> When a string starts with '{' or '[', then jQuery.parseJSON is used to parse it

マニュアルはそのとおりなのですけども、そのように動かなかった記憶がありますね。私が何か前提を勘違いしているのかも。

[matsu766]

回答ありがとうございます。
試したところ問題が解決しました！
ベストアンサーに選ばせていただきました。

[juner]

@int32_t 独自の格納を行っていた可能性……？先述の様に `,` 区切りの文字列で入れていたとか

Answer 2

jQueryのdataはjsのdatasetより古くdata-属性との紐づけも完全ではありません。
たとえば「data-category='["name", "name"]'」で配列風に設定した属性はjQueryのdataメソッドで確認すると配列として認識されますが、dataメソッドで設定した値はdata-*にフィードバックされません。

<div id="d1" data-category='["name", "name"]'>d1</div>
のとき
console.log($("#d1").data("category"));
すると
Array：[ "name", "name" ]
がかえる

いまさらjQueryに合わせる必要性も乏しいと思うのでdatasetで代用してください
なおHTML要素の属性には文字列しか設定できませんので配列をいれたいならJSONで対応ください

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  d1.dataset.category=JSON.stringify(["name","name"]);
  console.log(d1.outerHTML); // <div id="d1" data-category="[&quot;name&quot;,&quot;name&quot;]">d1</div>
  console.log(JSON.parse(d1.dataset.category)); // Array：[ "name", "name" ]
});
</script>
<div id="d1" >d1</div>

Answer 3

css selector だけでやりたいのでしたら

<div data-category-hoge data-category-fuga>...

みたいに 値は空文字だけ設定して プロパティだけ生やした形にして

$("[data-category-hoge],[data-category-fuga]")

の様に指定するのが一番簡単です。

この様な , で区切るタイプのセレクタを セレクタリストと言います

上記のセレクタだと [data-category-hoge] もしくは [data-category-fuga] となります。

セレクターリスト - CSS: カスケーディングスタイルシート | MDN

セレクターの途中でセレクターリストを使いたい場合は :is(selector1,selector2) の様に :is() 疑似クラスが使えます

例えば div:is([data-category-hoge],[data-category-fuga]) と書くことで div 且つ ( [data-category-hoge] もしくは [data-category-fuga] ) の意味となります

:is() - CSS: カスケーディングスタイルシート | MDN

以上。

追伸

なお、 jQuery の .data() は dataset への反映をしない為、実際に触りたい場合は 直接 HTMLElement.dataset を触った方が幾分かはマシな可能性があります。

jQueryのdata-*属性キャッシュ仕様と対策

HTMLElement: dataset プロパティ - Web API | MDN