javascript - 如何捕获单击哪个按钮以更改纯 JavaScript 中的图像？

Question

我想弄清楚在我的函数中单击了哪个按钮。 “下一个”按钮工作正常，但我不想为“上一个”按钮设置不同的功能只是为了减少 imageIndex 以便图像可以反转。

这里是初学者。欢迎提出建设性意见。

JS:
    <script>
       var imageArray = ["IMG1","IMG2",
                     "IMG3","IMG4"];

      var imageIndex = 1;

     function changeImage()
     {  
        document.getElementById("currentImg").src = imageArray[imageIndex];
        imageIndex++;   
        if(imageIndex >= imageArray.length)
        {
            imageIndex = 0;
        }
    };          
</script>

HTML:
     <img src="img1" id="currentImg" alt="img">
     <button id="nextBtn" type="button" onclick="changeImage();">Next</button>
     <button id="prevBtn" type="button" onclick="changeImage();">Previous</button>

Answer 1

在按钮的事件处理程序中传递 this:

onclick="changeImage(this);"

然后 this 将成为对被单击按钮的引用。在你的函数中添加一个参数:

function changeImage(btn) {

这将允许您通过其 ID 确定点击了哪个按钮:

btn.id

这将是 nextBtn 或 prevBtn，例如您可以使用它来检查 if 语句。