如何更改图像标签内的图像（使用innerMainImg类）当我单击当前图像时如何传递到下一个图像？

Question

我正在创建一个网页，其中有一个包含图像的 div，img 标签具有一类 innerMainImg。我的项目中的“图像”文件夹中有四张图像。图像是“prot1、prot2、prot 和 prot4”。我尝试向我的innerMainImg添加一个点击事件侦听器，以便当我点击第一个图像（prot1.jpg）时，该图像会更改为prot2，当我再次单击时，它的prot2.jpg会更改为prot3.jpg，依此类推。但我的代码并没有真正工作。我该如何解决这个问题？

var imgNumber = 1;

for(i = 1; i < 5; i++){
    imgNumber = i;
    var actualImage = "images/prot" + imgNumber + ".jpg";

    document.querySelector("#mainImg .innerMainImg").addEventListener("click", imgNext);
    function imgNext(){
        document.querySelector("#mainImg .innerMainImg").setAttribute("src", actualImage);
    };
}

Answer 1

您使用的方法 - 循环创建多个事件处理程序不太正确。更好的方法是创建一个事件处理程序，然后增加其中图像的索引值，如下所示：

const img = document.querySelector("#mainImg .innerMainImg");
const imgNext = () => {
  let imgNumber = ((img.dataset.index || 0) % 4);
  const actualImage = "images/prot" + ++imgNumber + ".jpg";
  img.setAttribute("src", actualImage);
  img.setAttribute('alt', imgNumber); // just for this demo, can be removed.
  img.dataset.index = imgNumber;
} 
img.addEventListener('click', imgNext);

img {
  width: 100px;
  height: 100px;
  border: 1px solid #CCC;
  display: block;
}

<div id="mainImg">
  <img class="innerMainImg" />
</div>

Answer 2

由于您使用单个元素来显示图像，因此不需要将其置于循环中，更不用说在其中多次添加事件侦听器/定义函数了。这将导致严重的意外副作用。

一个元素只需要添加一次事件监听器，并且只需要定义一次所使用的回调函数（或者编写在对 addEventListener 本身的调用中）。

以下面为例：https://jsfiddle.net/qtr8aL0b/

特别是 JS 部分，这将在每次点击时更新

src

；

const mainImage = document.getElementById('mainImage');

mainImage.addEventListener('click', () => {
    const nextSize = parseInt(mainImage.src.split('/')[3]) + 1;
    mainImage.src = `https://dummyimage.com/${nextSize}`;
})

图像元素还可以使用

src

设置

=

属性，而不必经历

setAttribute

的麻烦。