如何将eventListener应用于所有类？

Question

我一直致力于从头开始学习JS（请不要介意外观）。我已设法使第一个元素工作，并显示结果（单击下拉元素并将其显示为下拉列表）。但是，只要我添加第二次下拉，第二次下拉列表就不起作用，我不知道为什么。我有目标类，两者都是一样的。 我是JS的初学者，所以请在基础水平上讲解，这样我才能理解：）。

https://codepen.io/jernejt/pen/erYpLa

let dropdownSelection = document.querySelector(".dropdown-selection");
let dropdownInput = document.querySelector(".dropdown-input");
let dropdownItem = document.querySelectorAll(".dropdown-item");

dropdownInput.addEventListener("click", function(){
    dropdownSelection.classList.toggle("active");
});

for (let i = 0; i < dropdownItem.length; i++){
    dropdownItem[i].addEventListener("click", function (){
        dropdownInput.textContent = dropdownItem[i].textContent;
        dropdownSelection.classList.toggle("active"); 
    });
}

.dropdown {
  position: relative;
	margin-top: 50px;
}
.dropdown .dropdown-input {
  background-color: gray;
  display: inline-block;
  width: 200px;
  height: 44px;
  cursor: pointer;
}
.dropdown .dropdown-selection {
  background-color: darkgrey;
  display: none;
  padding: 0;
  margin: 0;
  position: absolute;
	z-index: 1;
  top: 44px;
  left: 0;
}
.dropdown .dropdown-selection .dropdown-item {
  cursor: pointer;
  list-style: none;
}
.dropdown .active {
  display: inline-block;
}

<div class="dropdown">
	<span class="dropdown-input">Select item</span>
	<ul class="dropdown-selection">
			<li class="dropdown-item">Item 1</li>
			<li class="dropdown-item">Item 2</li>
			<li class="dropdown-item">Item 3</li>
			<li class="dropdown-item">Item 4</li>
			<li class="dropdown-item">Item 5</li>
	</ul>
</div>

<div class="dropdown">
	<span class="dropdown-input">Select item</span>
	<ul class="dropdown-selection">
			<li class="dropdown-item">Item 1</li>
			<li class="dropdown-item">Item 2</li>
			<li class="dropdown-item">Item 3</li>
			<li class="dropdown-item">Item 4</li>
			<li class="dropdown-item">Item 5</li>
	</ul>
</div>

Answer 1

嗯，这就是我要做的。

这里发生了什么，点击eventlisteners添加到每个元素即(.dropdown-input)，而DOM结构ul就是这个元素的下一个元素，您只需使用nextElementSibling将活动类添加到单击的元素即可。是的，在添加活动类之前，您可以删除活动类（如果有）。只是为了让它更加用户友好。

这是片段

＆＃13;

＆＃13;

var dpds = document.querySelectorAll('.dropdown-input');

dpds.forEach(function (x) {
  x.addEventListener('click', function (e) {
    document.querySelectorAll('.dropdown-selection').forEach(function (e) {
    if(x.nextElementSibling !== e)
      return e.classList.remove("active");
    });
    x.nextElementSibling.classList.toggle("active");
  });
});

＆＃13;

.dropdown {
  position: relative;
	margin-top: 50px;
}
.dropdown .dropdown-input {
  background-color: gray;
  display: inline-block;
  width: 200px;
  height: 44px;
  cursor: pointer;
}
.dropdown .dropdown-selection {
  background-color: darkgrey;
  display: none;
  padding: 0;
  margin: 0;
  position: absolute;
	z-index: 1;
  top: 44px;
  left: 0;
}
.dropdown .dropdown-selection .dropdown-item {
  cursor: pointer;
  list-style: none;
}
.dropdown .active {
  display: inline-block;
}

＆＃13;

<div class="dropdown">
	<span class="dropdown-input">Select item</span>
	<ul class="dropdown-selection">
			<li class="dropdown-item">Item 1</li>
			<li class="dropdown-item">Item 2</li>
			<li class="dropdown-item">Item 3</li>
			<li class="dropdown-item">Item 4</li>
			<li class="dropdown-item">Item 5</li>
	</ul>
</div>

<div class="dropdown">
	<span class="dropdown-input">Select item</span>
	<ul class="dropdown-selection">
			<li class="dropdown-item">Item 1</li>
			<li class="dropdown-item">Item 2</li>
			<li class="dropdown-item">Item 3</li>
			<li class="dropdown-item">Item 4</li>
			<li class="dropdown-item">Item 5</li>
	</ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

下面的代码段显示了如何将事件侦听器添加到具有相同类的多个dom元素。

＆＃13;

＆＃13;

collect

＆＃13;

//new syntax 
Array
  .from(document.getElementsByClassName("foo"))
  .forEach(e => e.addEventListener("click", 
       f =>   document.getElementById("bar").innerText = f.target.innerText ));


//old syntax
[].slice.call(document.getElementsByClassName("foo")).forEach(function(foo){
  foo.addEventListener('mouseover', function(evt){
    document.getElementById('bar').innerHTML = evt.target.innerHTML + "(mouseover)"; 
});
});

＆＃13;

.foo {
  color: red;
}

＆＃13;

＆＃13;

＆＃13;