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

Question

当点击图片时，如何将图片的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";
  }
}

还有这个 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.

我该怎么做？

Answer 1

将this 传递给changeImage 以获取点击的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">

const changeImage = (img) => {
  img.src = img.src === "pic_bulbon.gif" ? "pic_bulboff.gif" : "pic_bulbon.gif";
};

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

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

现场演示：

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

<img src="https://via.placeholder.com/100x100?text=foo" width="100" height="180">
<img src="https://via.placeholder.com/100x100?text=foo" width="100" height="180">