document.querySelectorAllから単一クラスのパラメータをチェックする方法？

Question

querySelectorAllにセレクタとして複数のクラスがある場合、誰かが私に1クラスのelse文を使用する方法を説明できますか？たとえば、私は、私はクラス.clickMapItem.textを持つすべてのdivが表示何もしないことを確認したいが、2番目のクラスのチェックのためにそれが表示ブロックであれば

var x = document.querySelectorAll(".clickMapItem.text , .clickMapItem.multiImageText"); 
 

 
for (i = 0; i < click_map_items.length; i++) { 
 
    click_map_items[i].style.display = "none"; 
 
}

<div id="one" class="clickMapItem text" style="display: none;"></div> 
 
<div id="two" class="clickMapItem text" style="display: none;"></div> 
 
<div id="three" class="clickMapItem multiImageText" style="display: none;"></div> 
 
<div id="four" class="clickMapItem text" style="display: none;"></div> 
 
<div id="five" class="clickMapItem multiImageText" style="display: none;"></div>

を持っています。

私はif (x[0].style.display == "none") { code here } で実行しようとしましたが、それはNodeListからのみ最初divを取り、私はすべてをチェックしたいです。

Array.prototype.slice.callとは何ですか？

Answer 1

clickMapItemをすべて反復します。querySelectorAll()を使用してください。反復処理中に、classListプロパティとそのメソッドを使用して、要素にクラスがあるかどうかを確認できます。あなたは純粋なCSSルールあなたはこのために、通常のCSSセレクタを使用することができます

.clickMapItem.text { 
 
    display: none; 
 
} 
 
.clickMapItem.multiImageText { 
 
    display: block; 
 
}

Answer 2

を使用して同じfuunctionalityを実装することができますしかし

var click_map_items = document.querySelectorAll(".clickMapItem"); 
 
for (i = 0; i < click_map_items.length; i++) { 
 
    var elem = click_map_items[i]; 
 
    
 
    if (elem.classList.contains('text')) 
 
    elem.style.display = "none"; 
 
    
 
    if (elem.classList.contains('multiImageText')) 
 
    elem.style.display = "block"; 
 
}

---

。 このを見てください - > http://jsfiddle.net/5tSGv/12/

var classOne = document.querySelectorAll('.class1:not(.class2)'); 
for(var i = 0; i < classOne.length; i++) { 
    classOne[i].style.backgroundColor="#f3f3f3"; 
} 

Answer 3

これは、それが

<script> 
 
    function changeStyle(hotspotid) { 
 
    var hotspot = hotspotid.replace('_clickable', ''); 
 
    var x = document.getElementById(hotspot); 
 
    click_map_items = document.querySelectorAll(".clickMapItem"); 
 
    for (i = 0; i < click_map_items.length; i++) { 
 
     var elem = click_map_items[i]; 
 

 
     elem.style.display = "none"; 
 

 
     if (elem.classList.contains('text')) { 
 
     document.getElementById("clickMap_item_default").style.display = "none"; 
 
     x.style.display = "block"; 
 
     }; 
 

 
     if (x.classList.contains('multiImageText')) { 
 
     document.getElementById('clickMapFlashContainer').style.display = "none"; 
 

 
     }; 
 
    }; 
 
    }; 
 

 
function backClose() { 
 
    for (i = 0; i < click_map_items.length; i++) { 
 
    click_map_items[i].style.display = "none"; 
 
    } 
 
    document.getElementById('clickMapFlashContainer').style.display = ""; 
 
    document.getElementById("clickMap_item_default").style.display = ""; 
 
}; 
 

 
< /script>