Wie überprüft man einzelne Klassenparameter von document.querySelectorAll?

Kann mir jemand erklären wie man if else Anweisung für einzelne Klasse verwendet, wenn ich mehr als eine Klasse als Selektoren in querySelectorAll habe? Zum Beispiel habe ichWie überprüft man einzelne Klassenparameter von document.querySelectorAll?

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>

Ich möchte überprüfen, ob alle divs mit Klasse .clickMapItem.text Anzeige keine, aber für die zweite Klasse zu überprüfen, ob es Anzeigeblock.

Ich habe versucht, mit if (x[0].style.display == "none") { code here } zu tun, aber es braucht nur die ersten div vom NodeList, und ich möchte alle überprüfen.

Was ist mit Array.prototype.slice.call Parameter oder etwas anderes?

Quelle

2016-11-07 Mile Mijatovic

Iterieren Sie alle clickMapItem mit querySelectorAll(). Während der Iteration können Sie mithilfe der classList-Eigenschaft und ihrer -Methode überprüfen, ob das Element eine Klasse aufweist.

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"; 
 
}

immer Sie gleichen fuunctionality mit reinen CSS-Regeln

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

Quelle

2016-11-07 07:25:38 Satpal

Ok aussehen sollte, aber stattdessen sollte click_map_items.length sei x.length? Recht? Dieser Teil des Codes, den du mir geschickt hast, ist gut, genauso wie ich es gesucht habe, aber ich brauche auch einige Änderungen. Bitte schauen Sie, was ich versuche zu tun - https://jsfiddle.net/d0xyqbj7), weil in diesem Fall nicht sehr gut funktioniert, weil onclick, wenn 'text' enthält, 'clickMapFlashContainer' verschwindet auch und sollte nicht wie sein Sie können in meinem jsfiddle sehen, sollte nur verschwinden, wenn enthält "MultiImageText" –

@MileMijatovic, Es war ein Beispiel, das Sie sicherlich verwenden können 'sonst' wie https://jsfiddle.net/d0xyqbj7/1/ – Satpal

Ok, aber was passiert jetzt, https://jsfiddle.net/fcu9vcf2/ - beide if-Anweisung ausgeführt werden, console.log (elem) - http://prntscr.com/d43xab ... sollte nur ein div betreffen, aber in diesem Fall gilt für alle –

Sie können normale CSS-Selektoren für diesen Einsatz implementieren können. haben Sie einen Blick auf diese -> 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"; 
}

Quelle

2016-11-07 07:27:53 karman

Dies ist die letzte Version, wie es wie

<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>

Quelle

2016-11-07 15:22:40

Wie überprüft man einzelne Klassenparameter von document.querySelectorAll?

Antwort

Verwandte Themen