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

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 block ，其中 imgIndex 会递增。

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

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