我'我试图使用onclick事件在循环中定义一个函数，但它不'不像我期望的那样工作.我该怎么做呢?

I'm trying to define a function inside of a loop using onclick event, but it doesn't work like I expect. What should I do differently?

本文关键字：期望 我该怎么做 工作 函数 onclick 事件 循环 定义 一个      更新时间：2023-09-26

我正在尝试使用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>

当我通过输入attack [0].style改变add border时。Border = "3px纯蓝色";直接进入javascript它正在工作，但当我使用onclick事件它说，我不能设置未定义的属性。知道我哪里做错了吗?

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

这里有一个解决方案:

  • http://jsfiddle.net/XjKEj/

在匿名函数中使用this，而不是attacker[i]，因为它在该函数作用域中不可用。

相关文章：