Javascript：不能将事件监听器应用于类？

我遇到问题应用事件监听器的类。如果我尝试使用ID，它的作品，但如果我尝试与类，没有任何反应。我有四个div，全部完全相等。我想改变一个我点击，但保持其他三个没有改变。这可能吗？Javascript：不能将事件监听器应用于类？

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"; 
});

来源

2017-04-13 fields

'getElementsByClassName'返回一个节点列表，而不是一个单独的节点。 –

“getElementsByClassName”返回html集合 –

您需要了解元素是什么以及class和id是如何定位元素的方法。 – Quentin

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>

来源

2017-04-13 15:34:40

虽然你的解决方案工作，但并不理解这一切。所以去挖掘更好的方式，以便我能明白我在做什么。这是我的解决方案。（var i = 0; i <= teste.length; i ++）teste [i] .addEventListener（“click”，function（）{ this.classList.toggle（“expandCard”）; }）; }' – fields

@fields Array＃forEach'作为'for'循环的工作方式。看看文档，这很简单https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach –

是的，我知道。但后来我发现这:)（https://coderwall.com/p/kvzbpa/don-t-use-array-foreach-use-for-instead） – fields

Javascript：不能将事件监听器应用于类？

回答

相关问题