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

我有一个带有img元素和img src值数组的简单HTML文档。我还有一个脚本，每次单击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>

最佳答案

因为这个：

if(imgIndex===images.length)

数组的length为5（length从1开始计数），但是数组中的最高索引为4（索引从0开始计数），因此该条件永远不会成立。因此，您总是被引导到else块，其中imgIndex递增。

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

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