JavaScript data属性とgetAttribute

Question

<div class="box" data-test = '["t1","t2","t3"]'></div>
<div class="box" data-test = '["t1","t2","t3"]'></div>
<div class="box" data-test = '["t4","t5","t6"]'></div>
<div class="box" data-test = '["t1","t2","t4"]'></div>
<div class="box" data-test = '["t1","t5","t6"]'></div>

var node = document.getElementsByClassName("box");
	
      for(i = 0; i < node.length; i++){
		var node2 = node[i].getAttribute('data-test');
		if("t4" == node2){
		   node[i].setAttribute("style", "display:block");
		}else{
		   node[i].setAttribute("style", "display:none");
		}
	}

t4が一つでも入っているboxを表示し、それ以外を非表示にしたいです。
上記のプログラムでは、うまく動いていません、、

どのように修正すればよろしいでしょうか？よろしくお願いいたします。

Answer 1

window.addEventListener('DOMContentLoaded', function(e){
  [].forEach.call(document.querySelectorAll('.box[data-test*="t4"]'),function(x){
    x.style.display="none";
  });
});

もしくは

window.addEventListener('DOMContentLoaded', function(e){
  [].forEach.call(document.querySelectorAll('.box[data-test]'),function(x){
    if(JSON.parse(x.dataset["test"]).indexOf("t4")>=0){
      x.style.display="none";
    };
  });
});

Answer 2

        //if("t4" == node2){
        if (JSON.parse(node2).includes('t4')) {

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes

Answer 3

CSSだけで出来ます。

.box {
  display: none;
}
[data-test*='"t4"'] {
  display: block;
}
```**動くサンプル：**[https://jsfiddle.net/p4v95ods/](https://jsfiddle.net/p4v95ods/)

---

【属性セレクタ - CSS: カスケーディングスタイルシート | MDN】
[https://developer.mozilla.org/ja/docs/Web/CSS/Attribute_selectors](https://developer.mozilla.org/ja/docs/Web/CSS/Attribute_selectors)


---

提示されたJavaScriptの問題点は`getAttribute`がテキストしか返さないのに何も処理（配列にしたり文字列として探したり）していないからです。

【String.prototype.indexOf() - JavaScript | MDN】
[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf)

Comments

[ShibaNDD]

ありがとうございます。
もしCSSを使用ない場合は、getAttributeがテキストでしか返していないので、
indexOf()で照らしあわせるという方法が良いということですか？