JS更改许多HTML元素的图像并在其文本中逐行

Question

我认为这是一个非常简单的JS脚本，但由于某种原因我无法解决我的问题。 我要做的就是：我有一个项目列表，在它们之前有一个图像，我的情况下是一个空复选框。 现在，如果我单击该空白框，则另一幅图像将替换旧的图像（一个被打勾的框），并且该项目被划掉（直行）。 如果该项目已经被划过并具有打勾的图像，然后再次单击该图像，我希望它可以像以前一样将图像和文本装饰设置为其初始状态。 到目前为止，我已经完成了：

    <img id="tick_" onclick="myFunction()" src="image1.jpg" align="middle" /><strong id="cross">Item A</strong>
<img id="tick_" onclick="myFunction()" src="image1.jpg" align="middle" /><strong id="cross">Item B</strong>
<img id="tick_" onclick="myFunction()" src="image1.jpg" align="middle" /><strong id="cross">Item C</strong>

<script>
function myFunction() {
    if(document.getElementById("tick_").src == "image1.jpg"){
    document.getElementById("tick_").src = "image2.jpg";
    document.getElementById("cross").style.textDecoration = "line-through";
    }
       else {
    document.getElementById("tick_").src = "image1.jpg";
    document.getElementById("cross").style.textDecoration = "none";
    }
}
</script>

结果：它适用于第一项，但不适用于其余项。 可以解决我的问题吗？ 我可以帮忙吗？ 先感谢您。

Answer 1

您有多个具有相同id标签的元素。 您的网站上只能有一个带有相同标签的元素，而其他元素则应该不同。 因为JavaScript只需要一个ID标签，所以它找到第一个ID标签然后停止。 您可以尝试这样的事情：

 function myFunction(element) { if(element.src == "image1.jpg"){ element.src = "image2.jpg"; element.style.textDecoration = "line-through"; } else { element.src = "image1.jpg"; element.style.textDecoration = "none"; } }; 

 <img id="tick_" onclick="myFunction(this)" src="image1.jpg" align="middle" /><strong id="cross">Item A</strong> <img id="tick_" onclick="myFunction(this)" src="image1.jpg" align="middle" /><strong id="cross">Item B</strong> <img id="tick_" onclick="myFunction(this)" src="image1.jpg" align="middle" /><strong id="cross">Item C</strong>