Javascript：クラスにイベントリスナーを適用できませんか？

Question

クラスにイベントリスナーを適用する際に問題があります。私はIDを使用しようとすると、それは動作しますが、クラスで試しても何も起こりません。 私は4つのdivを持っています。私はクリックしたものを変更したいが、変更せずに他の3つを保持する。 可能ですか？

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 、これは動作しません

これはID（ "UI"）

を持つ要素のために働く

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

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>