我想在onclick事件的循環內定義一個函數，但它不像我所期望的那樣工作。我應該做什麼不同？

我想在使用javascript的html頁面的div中添加邊框。我似乎無法使用onclick事件。這是我的javascript：我想在onclick事件的循環內定義一個函數，但它不像我所期望的那樣工作。我應該做什麼不同？

var attacker = document.getElementsByClassName('attacker'); 
for (var i = 0; i < attacker.length; i++) { 
attacker[i].onclick = function() { 
    attacker[i].style.border = "3px solid blue"; 
}};

這裏是我的html：

<div class="attacker"> 
    <img src="img/'.$race2.'/'.$units2[$i].'.jpg" /> 
    <div class="hp"></div> 
</div>

當我改變輸入攻擊[0] .style.border = 「3px的固體藍」添加邊框; 直接轉換爲JavaScript它正在工作，但是當我使用onclick事件它說我不能設置undefined的屬性。任何想法，我出錯了？

來源

2013-02-28 happy_fist

你能設置一個例子嗎？ – 2013-02-28 19:16:05

這是因爲i沒有被關閉了，所以.onclick功能將始終使用i作爲.attacker列表的長度+ 1有幾種解決方案，但我最喜歡的是遍歷與.forEach這樣的節點列表該封閉件是自動的：

Array.prototype.forEach.call(document.getElementsByClassName('attacker'), 
function (elem) { 
    elem.addEventListener('click', function() { 
     this.style.border = "3px solid blue"; 
    }); 
});

來源

2013-02-28 19:16:21

這個解決方案也適用，但我選擇Zlatan的因爲它看起來更好，而且更具可讀性。謝謝。 – 2013-02-28 19:26:43

@happy_fist他的解決方案仍然依賴於'onclick'屬性，這是不好的！事件屬性不使用標準事件註冊模型。如果你喜歡，你可以用一個標準的for循環替換'Array.prototype.forEach'循環;我的解決方案的其餘部分將與它一起工作。我只是喜歡迭代（實際上認爲它自己更易讀），而不是循環。如果可讀性是一個問題，像jQuery這樣的JavaScript庫可以完成我在很多代碼中所做的工作。 – 2013-02-28 19:28:53

所以onclick事件和監聽點擊事件的事件監聽器有區別嗎？ – 2013-03-01 13:09:07

的溶液在此所作：

http://jsfiddle.net/XjKEj/

在您的匿名函數中使用this而不是attacker[i]，因爲它在該函數範圍下不可用。

來源

2013-02-28 19:17:22

我想在onc​​lick事件的循環內定義一個函數，但它不像我所期望的那樣工作。我應該做什麼不同？

回答

相關問題

我想在onclick事件的循環內定義一個函數，但它不像我所期望的那樣工作。我應該做什麼不同？