Question

我试图在点击中替换表格中的图像。我没有使用JQuery;我只是Javascript来完成这个任务。我想我已经将问题缩小到下面的JavaScript代码中的注释。所有其他搜索结束时我都知道如何更改图像源，因为它们是身体的一部分，而不是细胞的一部分。我也经历了其他可能的方式，但由于某种原因，我无法让它发挥作用。非常感谢！

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变量甚至不存在。它将是undefined。请注意，将此变量设为全局会导致cell成为类名PieceImg的最后一个元素，因此无法更好地工作。

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

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

如果这对您有意义，请告诉我。

这是一个功能齐全的小提琴：https://jsfiddle.net/7se0vyf5/

Answer 2

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

＆＃13;

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));
      
}

＆＃13;

<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>

＆＃13;

尝试在单击时替换表中的图像

2 个答案: