JavaScript：單擊相同類名稱的事件

-1

我有以下代碼片段。問題是onclick事件不會觸發第二個標籤，它與第一個標籤具有相同的類別。這是爲什麼？我在網上搜索，發現了多個解決方案，但他們都在jQuery中。但我想用純JavaScript。有誰知道我在這裏做錯了什麼？JavaScript：單擊相同類名稱的事件

var label = document.getElementsByClassName('text'); 
 
label[0].onclick = function() { 
 
\t console.log(true); 
 
};

<label class="text">Hello</label> 
 
<label class="text">World!</label>

PS：我知道這個問題已經被問這裏多次（但解決方案是jQuery的）。所以，請不要標記這個問題的重複：/

來源

2017-02-04 m87

'getElementsByClassName'返回節點的數組（集合），而你只應用功能第一個'[0]'元素 – jake2389

label是所有與text類的元件的陣列，所以label[0]將僅應用於文檔中的第一個元素。做到這一點最簡單的方法很可能是一個循環，如

for (var i = 0; i<label.length; i++){ 
    label[i].onclick = function() { 
     console.log(true); 
};

來源

2017-02-04 19:35:48

var label = document.getElementsByClassName('text'); 
for (var i = 0; i<label.length; i++) { 
    label[i].oncllick = function() { console.log(true); }; 
}

來源

2017-02-04 19:32:36

你可以使用event delegation：

document.body.onclick = function (ev) { 
 
    if (ev.target.getAttribute("class") == "text") { 
 
    console.log(true); 
 
    } 
 
};

<label class="text">Hello</label> 
 
<label class="text">World!</label>

由於事件委派新標籤也可點擊：

var nLabels = 2; 
 

 
document.body.onclick = function (ev) { 
 
    var newLabel; 
 
    if (ev.target.getAttribute("class") == "text") { 
 
    console.log(ev.target.textContent); 
 
    } else if (ev.target.id == "btn-add-label") { 
 
    newLabel = document.createElement("label"); 
 
    newLabel.setAttribute("class", "text"); 
 
    newLabel.textContent = " new label #" + (nLabels++); 
 
    document.body.appendChild(newLabel); 
 
    } 
 
};

<button type="button" id="btn-add-label">Add label</button> 
 
<label class="text">Hello</label> 
 
<label class="text">World!</label>

來源

2017-02-04 19:32:44 leaf

如果存在更復雜的DOM結構，將這種方法應用於第一個父容器會更好。但是，這是一個很好的方向使用一個代表團，+1 – RomanPerekhrest

我同意你@RomanPerekhrest，+1 :-) – leaf

-1

試試這個

var label = document.getElementsByClassName('text'); 
for (var i = 0; i < label.length; i++) { 
    label[i].onclick = function() { 
     console.log(true); 
    }; 
}

來源

2017-02-05 18:55:57 JantoKarma

JavaScript：單擊相同類名稱的事件

回答

相關問題