为什么我需要双击最后一张图片？

Question

我有一个简单的HTML文档,其中包含一个img元素和一组img src值.我还有一个脚本,img每次单击时都会将src 更改为另一个图像.它工作正常,但我注意到你必须点击最后一次图像两次才能重置图像数组.为什么我需要点击两次？

<img src="image1.jpg">

<script>
    let images = ["image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg", "image5.jpg"];  
    let imgIndex = 0; 

    $("img").click(function() {             
        if (imgIndex === images.length) {
            imgIndex = 0;
        } else {          
            imgIndex++
        }

        $(this).attr("src", images[imgIndex]);
    });
</script>

Answer 1

这是因为:

if(imgIndex===images.length)

的length阵列的是5(length开始计数,1),但在阵列中的最高索引是4(索引开始从计数0),所以这一条件永远不会为真.因此,您总是被定向到else块,其中imgIndex增加了.

要正确确定计数器何时到达最后一个数组索引,请将该行更改为:

if(imgIndex===images.length - 1)