Question

我有以下精彩的代码。如您所见，它是一个在按钮点击时打开/关闭（显示/隐藏）一盒内容的功能。

现在这个工作非常好。但只有第一个按钮/框...如果有很多（并且有很多），它不起作用。它只适用于第一个。

我知道我可以用jQuery轻松完成这一切 - 但我的目标是使用vanilla JavaScript而不依赖于jQuery。

那么我应该如何编辑代码以处理许多按钮/框 - 所有这些都使用vanilla 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>

JavaScript-Event不仅在第一个元素上

1 个答案: