Question

我有这个功能，根据放置的数组，将我的对象放在我想要的位置。

如果他们在玩家[0]他们去某个地方，如果他们在玩家[1]他们去的地方。 X和Y仅用于ilustration目的，例如它们实际上就像600px，并且都是不同的。

此funstion还通过参数接收一个标志，该标志告诉函数src是否继续相同或者是否设置为另一个src。一切正常。

function putHands(flag){
  if(flag == true) show= true;
  else show = false;
  for(var i = 0; i < 4; i++){              
    for(var j = 0; j < 13; j++){
      if(i == 0){players[i][j].style.left = X; players[i][j].style.top = Y;}
      if(i == 1){players[i][j].style.left = X; players[i][j].style.top = Y;}
      if(i == 2){players[i][j].style.left = X; players[i][j].style.top = Y;}
      if(i == 3){players[i][j].style.left = X; players[i][j].style.top = Y;}
      if(show == true)
        players[i][j].src = '../images/c'+players[i][j].id+'.gif';
    }
  }
}

现在我想添加我在标题中所说的内容，并尝试这样做：

players[i][j].addEventListener('mouseover', function() {players[i][j].src = '../images/c'+players[i][j].id+'.gif';});

我想在每个对象上添加一个更改自身src的事件。

如何只使用简单的JavaScript实现这一目标？每次我将鼠标移到对象上时，我尝试的都会返回以下错误：

Uncaught TypeError: Cannot read property '13' of undefined

Answer 1

只需使用this来引用绑定元素。

players[i][j].addEventListener('mouseover', function() {
  this.src = '../images/c'+this.id+'.gif';
});

否则，您正在使用循环中不断覆盖的i和j变量，这样当处理程序最终触发时，它会获得上次分配的任何值。

换句话说，在分配的处理程序中，它本来就是......

players[4][13]

...超出了范围，显然不是你想要的数字。

如果您确实需要i和j用于任何其他目的，您可以将它们直接添加到元素本身（如果这不打扰你），或者你可以通过在循环的每次迭代中调用另一个函数来创建一个新的变量作用域，将i和j传递给它，并在该作用域中创建处理程序。

另外，因为现在你的函数确实没有改变每个元素，你可以使用单个函数而不是在循环中创建多个函数。

function handler() {
   this.src = '../images/c'+this.id+'.gif';
}

function putHands(flag){
  if(flag == true) show= true;
  else show = false;
  for(var i = 0; i < 4; i++){              
    for(var j = 0; j < 13; j++){
      // ...your code...

      players[i][j].addEventListener('mouseover', handler);
    }
  }
}

现在，所有元素都有效地重用了一个函数。

另外，有点偏离主题，但是......

if(flag == true) show= true;
else show = false;

可缩短为：

show = !!flag;

从技术上讲，它有点不同，因为==的语义不是简单的 truthy / falsey 评估。如果您确实需要==的行为，那么您可以执行以下操作：

show = flag == true;

onmouseover的addEventListener更改了html img对象的src

1 个答案: