我正在尝试通过单击替换表格中的图像。我没有使用 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');
})
}
最佳答案
假设您在加载 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/
关于javascript - 尝试通过单击替换表格中的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29762362/