JavaScript-Event nicht nur auf erstes Element

Question

Ich habe das folgende wunderbare Stück Code. Wie Sie sehen können, ist es eine Funktion zum Öffnen/Schließen (Einblenden/Ausblenden) einer Inhaltsbox beim Klicken auf die Schaltfläche.

Jetzt funktioniert das völlig einwandfrei. Aber nur auf der ersten Taste/Box ... wenn es VIELE gibt (und es gibt viele), funktioniert es nicht. Es funktioniert nur beim ersten.

Ich weiß, dass ich das alles ganz einfach mit jQuery machen konnte - ABER mein Ziel ist es, JavaScript zu verwenden und nicht von jQuery abhängig zu sein.

Also wie soll ich den Code bearbeiten, um auf vielen Tasten/Boxen zu arbeiten - alle mit Vanille Javascript?

(Sehen Sie es als Lern-Stück für mich jQuery zu überspringen.)

<button class="openUrls" data-thisButton="openUrls--{ID}" data-target="js-urls--{ID}" data-state="closed"><svg… />Collapse</button> 

<div class="urls js-urls--{ID}" data-state="closed">Content</div> 

<style> 
.urls[data-state='closed'] {display:none} 
.urls[data-state='open'] {display:inherit} 
.openUrls[data-state='open'] svg {transform:rotate(180deg)} // rotates the carret-SVG inside the button-element 
</style> 

<script> 
var button = document.querySelector('.openUrls'); 

var toggleState = function(elem,class1,class2) { 
    var elem = document.querySelector(elem); 
    elem.setAttribute('data-state', elem.getAttribute('data-state') === class1 ? class2 : class1); 
}; 

button.onclick = function(e) { 
    e.preventDefault(); 

    var target = button.getAttribute('data-target'); 
    toggleState('.'+target, 'closed', 'open'); 

    var thisButton = this.getAttribute('data-thisButton'); 
    toggleState('[data-thisButton='+thisButton+']', 'closed', 'open'); 
}; 
</script> 

Update: werden Live-Demo https://jsfiddle.net/b24ybtjv/3/

Answer 1

Verwendung querySelectorAll dann Schleife

var toggleState = function(elem,class1,class2) { 
 
    var elem = document.querySelector(elem); 
 
    elem.setAttribute('data-state', elem.getAttribute('data-state') === class1 ? class2 : class1); 
 
}; 
 

 
var button = document.querySelectorAll('.openUrls'); 
 

 
button.forEach(function(item, index) { 
 
    item.onclick = function(e) { 
 
    e.preventDefault(); 
 

 
    var target = this.getAttribute('data-target'); 
 
    console.log(target); 
 
    toggleState('.' + target, 'closed', 'open'); 
 

 
    var thisButton = this.getAttribute('data-thisButton'); 
 
    toggleState('[data-thisButton=' + thisButton + ']', 'closed', 'open'); 
 
    } 
 
});

.urls[data-state='closed'] {display:none} 
 
.urls[data-state='open'] {display:inherit} 
 
.openUrls[data-state='open'] svg {transform:rotate(180deg)} // rotates the carret-SVG inside the button-element

<button class="openUrls" data-thisButton="openUrls-1" data-target="js-urls-1" data-state="closed"><svg… />Collapse</button> 
 
<button class="openUrls" data-thisButton="openUrls-2" data-target="js-urls-2" data-state="closed"><svg… />Collapse 2</button> 
 

 
<div class="urls js-urls-1" data-state="closed">Content</div> 
 
<div class="urls js-urls-2" data-state="closed">Content2</div>