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)

Answer 2

Becouse数组索引以0开头，因此最后一个元素具有索引＆＃34; array.length - 1＆＃34;。因此，为了使其正常工作，您需要做的就是更换＆＃39; images.length＆＃39;通过＆＃39; images.length - 1＆＃39;在你的条件声明中。

private void button1_click(object sender, RoutedEventArgs e)
{
    Window1 window1 = Application.Current.Windows.OfType<Window1>().FirstOrDefault();
    if (window1 != null)
    {
        window1.frame1.Source = new Uri("page1.xaml", UriKind.Relative);
    }
}

Answer 3

或使用模运算符（%）保留imgIndex数组边界，如：

$("img").click(function() {             
    imgIndex = (imgIndex + 1) % images.length;

    $(this).attr("src", images[imgIndex]);
});

Answer 4

另一种方法是使用模数。

将imgIndex声明为1并在使用attr方法时递增它。

＆＃13;

var images = ["image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg", "image5.jpg"];  
var imgIndex = 1; 

$("img").click(function() {             
  imgIndex = imgIndex % images.length;
  console.log(imgIndex);
  $(this).attr("src", images[imgIndex++]);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="image1.jpg">

＆＃13;

Answer 5

正如其他人所说，数组从0转到length-1，因此检查长度将得到两个结果。

更改为：

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

另一种方法是先增加索引，然后检查是否>= length。

imgIndex++;
if (imgIndex >= images.length) {
    imgIndex = 0;

此外，您应该始终检查>=是否也会遇到全局值更改为大于数组长度的情况，因为这意味着{{1从不匹配。（多年来一直是许多安全漏洞的原因）。

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

5 个答案: