javascript - Javascript:无法将事件监听器应用于类？

This question already has answers here:

What do querySelectorAll and getElementsBy* methods return?
                            
                                （9个答案）
                            
                    
                3年前关闭。
        

    

我在将事件侦听器应用于类时遇到问题。如果我尝试使用ID，它可以工作，但是如果我尝试使用类，则什么也不会发生。
我有四个div，都完全相等。我想更改一个我单击的按钮，但其他三个按钮保持不变。
可能吗？

的HTML

<div class="card">
    - 6 pièces, dont 3 aveugles.
    - Cuisine - électroménagers intégrés.
    - 2 salles de bains modernes.
</div>
<div id="ui" class="card">
    - 6 pièces, dont 3 aveugles.
    - Cuisine - électroménagers intégrés.
    - 2 salles de bains modernes.
</div>
<div class="card">
    - 6 pièces, dont 3 aveugles.
    - Cuisine - électroménagers intégrés.
    - 2 salles de bains modernes.
</div>
<div class="card">
    - 6 pièces, dont 3 aveugles.
    - Cuisine - électroménagers intégrés.
    - 2 salles de bains modernes.
</div>

的CSS

.card {
   height: 100px;
   width: 245px;
   float: left;
   box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
   font-size: 0.85em;
   line-height: 1.5em;
   margin: 15px;
   overflow: hidden;
   border-radius: 5px;
  }

.expandCard {
  height:500px;
  width: 245px;
  float: left;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  font-size: 0.85em;
  line-height: 1.5em;
  margin: 15px;
  border-radius: 5px;
}

JS
这不起作用

var teste = document.getElementsByClassName("card");
teste.addEventListener("click", function changeSize() {
   teste.className = "expandCard";
});

这适用于ID（“ ui”）的元素

var teste = document.getElementByID("ui");

teste.addEventListener("click", function changeSize() {
   teste.className = "expandCard";
});

最佳答案

getElementsByClassName返回类似数组的对象。您可以使用Array.from方法将其更改为数组。然后，使用Array#forEach将事件侦听器绑定到每个元素。

var teste = document.getElementsByClassName("card");

Array.from(teste).forEach(v => v.addEventListener("click", function() {
  this.classList.toggle('expandCard');
}));

.card {
  height: 100px;
  width: 245px;
  float: left;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  font-size: 0.85em;
  line-height: 1.5em;
  margin: 15px;
  overflow: hidden;
  border-radius: 5px;
}

.expandCard {
  height: 500px;
  width: 245px;
  float: left;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  font-size: 0.85em;
  line-height: 1.5em;
  margin: 15px;
  border-radius: 5px;
}

<div class="card">
  - 6 pièces, dont 3 aveugles. - Cuisine - électroménagers intégrés. - 2 salles de bains modernes.
</div>
<div id="ui" class="card">
  - 6 pièces, dont 3 aveugles. - Cuisine - électroménagers intégrés. - 2 salles de bains modernes.
</div>
<div class="card">
  - 6 pièces, dont 3 aveugles. - Cuisine - électroménagers intégrés. - 2 salles de bains modernes.
</div>
<div class="card">
  - 6 pièces, dont 3 aveugles. - Cuisine - électroménagers intégrés. - 2 salles de bains modernes.
</div>

关于javascript - Javascript:无法将事件监听器应用于类？ ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43396291/