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：不能將事件監聽器應用於類？

回答

相關問題