JavaScript事件不仅在第一个元素上

我有下面一段精彩的代码。正如您所见，这是一个打开/关闭显示/隐藏按钮单击内容框的功能

现在这一切都很好。但仅在第一个按钮/框上…如果有很多，并且有很多，则不起作用。它只对第一个有效

我知道我可以用jQuery轻松完成这一切，但我的目标是使用普通JavaScript，而不是依赖jQuery

那么，我应该如何编辑代码以在许多按钮/框上工作呢？所有这些按钮/框都使用香草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>

更新：实时演示

使用querySelectorAll然后循环

var-toggleState=functionelem，class1，class2{ var elem=document.queryselectorem； elem.setAttribute'data-state'，elem.getAttribute'data-state'===class1？class2:class1； }; var button=document.queryselectoral.openurl'； button.forEachfunctionitem，索引{ item.onclick=函数e{ e、 防止违约； var target=this.getAttribute'data-target'； console.logtarget； 切换状态“.”+目标“，”关闭“，”打开“； var thisButton=this.getAttribute'data-thisButton'； 切换状态“[data thisButton=”+thisButton+”]、“关闭”、“打开”； } }; .URL[data state='closed']{display:none} .URL[data state='open']{display:inherit} .openUrls[data state='open']svg{transform:rotate180deg}//在按钮元素内旋转carret svg 崩溃 崩溃2 所容纳之物

---

内容2我不明白这个。。。你试过QuerySelector吗？document.querySelector：返回文档中与指定选择器或选择器组匹配的第一个元素。@GerardoFurtado:是，如果我使用querySelector，则什么都不会发生。使用querySelector，它至少可以与第一个元素一起工作。更新：我添加了一个JSFIDLE。这就是为什么我和JavaScript是一个爱/恨的故事：-…有时候解决方案是如此简单和接近！谢谢你，@ewwink@Andreas我的坏习惯：lol更新了答案，albuvee不客气