javascript - 我正在尝试使用 onclick 事件在循环内定义一个函数，但它不像我预期的那样工作。我应该怎么做？

Question

我正在尝试使用 javascript 为 html 页面中的 div 添加边框。我似乎无法使用 onclick 事件来做到这一点。这是我的 JavaScript：

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>

当我通过输入attacker[0].style.border =“3px solid blue”更改添加边框时；直接进入javascript它正在工作，但是当我使用onclick事件时它说我无法设置未定义的属性。知道我哪里出错了吗？

Answer 1

这是因为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";
    });
});

Answer 2

这里提出了一个解决方案：

• http://jsfiddle.net/XjKEj/

this在您的匿名函数中使用，而不是attacker[i]，因为它在该函数范围内不可用。