尝试通过单击替换 table 中的图像

Question

我正在尝试通过单击替换 table 中的图像。我没有使用 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

假设您运行在 JavaScript 加载 DOM 后，您只需将 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 变量甚至不存在。它将是 undefined。请注意，将此变量设置为全局变量会导致 cell 成为 class 名称 PieceImg 的最后一个元素，因此效果不会更好。

但是，如果您使用 this，您将在单击时引用 "clicked"（记住 addEventListener("click")）元素，在本例中是您的图像。因此，您可以更改 src。在您的 eventListener 中执行 console.log of "this" 以查看您可以访问的更多内容。这与添加内联 "click" 处理程序的效果类似：

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

让我知道这对你是否有意义。

这是一个完整的函数 fiddle：https://jsfiddle.net/7se0vyf5/

Answer 2

问题是for循环和变量的引用。当您分配事件处理程序时，它不会保持状态。

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

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

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

尝试通过单击替换 table 中的图像

Attempting to replace an image in a table on a click

javascript

html

image

png