javascript - 尝试通过单击替换表格中的图像

Question

我正在尝试通过单击替换表格中的图像。我没有使用 JQuery；我只用Javascript来完成这个任务。我想我已经将问题范围缩小到了下面 JavaScript 代码中的注释。所有其他搜索最终让我了解了当图像源是 body 等的一部分而不是细胞的一部分时如何更改图像源。我也尝试过其他可能的方法，但由于某种原因我无法让它发挥作用。非常感谢!

HTML(只需剪掉，以便您可以看到每个变量所指的内容)

<td class="block"><img class="PieceImg" src="Directory/BlankSpace.png"></td> 

JavaScript

var cells = document.getElementsByClassName("PieceImg");

for(var j = 0; j<cells.length;j++)
{
    var cell = cells[j];
    cell.addEventListener("click", function()
    {
        cell.src="Directory/RedPiece.png"; // This is the problem
        alert('Test');
    })
}

Answer 1

假设您在加载 DOM 后运行 JavaScript，则只需将 cell.src 替换为 this.src 即可。

var cells = document.getElementsByClassName("PieceImg");

for(var j = 0; j<cells.length;j++)
{
  var cell = cells[j];
  cell.addEventListener("click", function()
  {
    // Replace cell. with this.
    this.src="Directory/RedPiece.png";
    alert('Test');
  })
}

原因很简单:每次循环时，都会创建一个名为“cell”的变量 (var cell = cells[j];)。每次运行循环时都会覆盖该非全局变量。如果您在函数内运行此代码，则当需要更改 src 时，您的 cell 变量甚至将不存在。它将是未定义。请注意，将此变量设置为全局变量将导致 cell 成为类名 PieceImg 的最后一个元素，因此效果不会更好。

但是，如果您使用 this 代替，那么当您单击“clicked”(记住 addEventListener("click"))元素时，您将引用该元素，在此案例您的形象。因此您可以更改 src。在您的 eventListener 中执行“this”的 console.log 以查看您可以访问的更多内容。这提供了与内联添加“click”处理程序类似的效果:

<img src="fox.png" onclick="alert(this.src);" alt="Fox" />

请告诉我这对您是否有意义。

这是一个功能齐全的 fiddle :https://jsfiddle.net/7se0vyf5/