循环遍历 Javascript 数组的索引时重置变量答案

【问题标题】：Reset variable when cycling through index of a Javascript array循环遍历 Javascript 数组的索引时重置变量
【发布时间】：2017-01-14 05:26:30
【问题描述】：

我正在尝试使用 javascript/jQuery 创建背景图像“滑块”。这个想法是单击一个锚点并分别向前或向后移动图像。我将文件名放在一个名为“images”的数组中。

它有效，但我不知道如何将最后一张图像恢复为第一张图像，反之亦然。在我的控制台中，它抛出了一个未定义的变量。这是我的代码：

var i = 0;
var arrayLength = images.length - 1;
currentImage(0); //show the first photo initially

function currentImage(i) {
    $('#image').css("background-image", "url(img/" + images[i] + ")");
    if ( i > arrayLength ) {
      $('#image').css("background-image", "url(img/" + images[0] + ")");
      i = 0;
      return;
    }
    console.log(i);
}

$('#prev').click(function(){
    i--;
    currentImage(i);
});
$('#next').click(function(){
    i++;
    currentImage(i);
});

我尝试过使用“if (i = undefined) {i=0; console.log("works");}" 和 "if (i > arrayLength) {i=0; console.log("works ");}" 这两种方法都产生了成功的控制台日志，但两种方法似乎都没有重置 i。

我似乎无法在 SO 上找到类似的帖子，但也许我正在搜索错误的内容。任何帮助，或正确方向的一点都会很棒。谢谢！

【问题讨论】：

希望这有帮助 - jsfiddle.net/2fqpbg0w

标签： javascript jquery arrays reset

【解决方案1】：

在传递给currentImage之前检查i

var i = 0;
var arrayLength = images.length - 1;
currentImage(0); //show the first photo initially

function currentImage(i) {
    $('#image').css("background-image", "url(img/" + images[i] + ")");
}

$('#prev').click(function(){
    i--;
    if(i < 0) i = arrayLength;
    currentImage(i);
});

$('#next').click(function(){
    i++;
    if(i > arrayLength) i = 0;
    currentImage(i);
});

【讨论】：

我现在看到了它是如何工作的。非常感谢您的回答！

【解决方案2】：

对于转发，您可以改用模数

i = (i+1) % images.length

这总是会在数组中返回一些东西

对于向后，只需检查它是否变为负数，如果是，则转到最大值

if (i < 0)
{
    i = arrayLength ;
}

【讨论】：

【解决方案3】：

var i = 0, images=["q","w","e","r","t","y"];

var arrayLength = images.length - 1;
currentImage(0); //show the first photo initially

function currentImage(i) {
    if(i < 0) i = arrayLength;
    if(i > arrayLength) i = 0;
    
    alert(images[i]); //replace this with logic for setting image
}

$('#prev').click(function(){
    i--;
    currentImage(i);
});
$('#next').click(function(){
    i++;
    currentImage(i);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<input type="button" value="previous" id="prev">
<input type="button" value="next" id="next">

【讨论】：

【解决方案4】：

在您的 $('#prev') 和 $('#next') click 函数中，首先检查您的 images 是否有一个项目在 [i] 的索引处，然后再进行迭代。例如：

$('#prev').click(function(){
   if(images[i-1] != undefined){
      i--;
      currentImage(i);
   }else{
      // do the reset here, or if you want you can show the last image in an array
      currentImage(images.length);
   }
});

$("#next").click 函数也是如此，在迭代 i 变量之前先检查 images[i+1]。

【讨论】：