JavaScript-Eventは最初の要素だけではありません

Question

次の素晴らしいコードがあります。あなたが見ることができるように、それはボタンクリックでコンテンツのボックスを開閉する（表示/非表示）機能です。

これは完全にうまく機能します。しかし、最初のボタン/ボックスにのみ...多くの場合（そして多くの場合）、それは動作しません。それは最初のものでのみ動作します。

私はjQueryを使って、すべてのかなり簡単にこれを行うことが知っている - しかし、ここで私の目標は、jQueryのに依存するようにバニラはJavaScriptを使用していないことです。

それでは、どのように私は多くのボタン/ボックス上で動作するコードを編集する必要があります - すべてのバニラのJavascriptで？

（私はjQueryのをスキップするための学習ピースとしてそれを見てください。）

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

更新：ライブ・デモhttps://jsfiddle.net/b24ybtjv/3/

Answer 1

使用querySelectorAll、ループ

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>