Question

我在将类事件监听器应用于类时遇到问题。如果我尝试使用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的元素（＆＃34; ui＆＃34;）

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

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

Answer 1

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：无法将事件监听器应用于课程？

1 个答案: