Javascript 使用OnClick方法更改循环图像源

单击图像时，如何将图像的

src

与其他图像交换？我尝试了以下代码：

function changeImage() {
  var i;
  for (i = 0; i < 2; i++) {
    var image = document.getElementById('myImage[]');
  }
  if (image.src.match("bulbon")) {
    image.src = "pic_bulboff.gif";
  } else {
    image.src = "pic_bulbon.gif";
  }
}

函数changeImage（）{
var i；
对于（i=0；i<2；i++）{
var image=document.getElementById（'myImage[]）；
}
if（image.src.match（“bulbon”））{
image.src=“pic_bulboff.gif”；
}否则{
image.src=“pic_bulbon.gif”；
}
}

这个HTML：

<?php
for($i=0;$i<2;$i++) { ?>
<img id="myImage[]" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180">
<?php } ?>

我想如果点击myImage[]，源代码将更改为pic_bulbon.gif， 如果我再次单击，源代码将更改为pic_bulboff.gif

---

我该怎么做？

将

此
传递到
更改图像
，因此获取单击的
img
，然后检查其
src
，并使用条件运算符将
bulboff
或
bulbon
分配给其
src
：

<img id="myImage[1]" onclick="changeImage(this)" src="pic_bulboff.gif" width="100" height="180">
<img id="myImage[2]" onclick="changeImage(this)" src="pic_bulboff.gif" width="100" height="180">

<img src="pic_bulboff.gif" width="100" height="180">
<img src="pic_bulboff.gif" width="100" height="180">

但最好完全避免内联处理程序-使用Javascript正确地附加事件侦听器：

现场演示：


document.querySelectorAll（'img'）.forEach（（img）=>{
img.addEventListener（'click'，（）=>{
img.src=img.src==”https://via.placeholder.com/100x100?text=foo" ? "https://via.placeholder.com/100x100?text=bar" : "https://via.placeholder.com/100x100?text=foo";
});
});

这是否回答了您的问题？它对图像循环有效吗？对不起，我更改了我的问题按“运行代码片段”-你可以看到它对你自己有效。这是有效的，但是当源代码更改为pic_bulbon.gif时，它不能再次更改为默认值（pic_bulboff.gif），你能解释一下吗？当然有效-如果你再次单击图像，它将切换。按答案中的“运行代码片段”查看。如果单击一次，图像将更改。如果再次单击它，图像会重新更改。
<img src="pic_bulboff.gif" width="100" height="180">
<img src="pic_bulboff.gif" width="100" height="180">

document.querySelectorAll('img').forEach((img) => {
  img.addEventListener('click', () => {
    img.src = img.src === "pic_bulbon.gif" ? "pic_bulboff.gif" : "pic_bulbon.gif";
  });
});