0

我在自己的灯箱中为画廊设置限制时遇到问题

    <script>


var imagenumber = 0;

    function btnleft(){
        load = imagenumber-=1;
        document.getElementById('lightboxcontent').innerHTML=imagelist[load];

        }

function btnright(){
    load = imagenumber+=1;
    if (load==undefined){load=imagenumber-=1}
    document.getElementById('lightboxcontent').innerHTML=imagelist[load];
    }
</script>

然后数组

var imagelist=new Array(); // regular array (add an optional integer
imagelist[0]="image1.jpg";       // argument to control array's size)
imagelist[1]="image2.jpg";
imagelist[2]="image3.jpg";

当我在下一个按钮上单击超过 3 次时，我收到错误消息“未定义”。我应该怎么做才能限制我的阵列？

4

2 回答 2

1

试试看

 function btnleft(){
    var load = imagelist[imagenumber-=1];
    if (load) // imagenumber in array boundaries
        document.getElementById('lightboxcontent').innerHTML = load;
    else
        imagenumber = 0;
 }
 function btnright(){
    var load = imagelist[imagenumber+=1];
    if (load) // imagenumber in array boundaries
        document.getElementById('lightboxcontent').innerHTML = load;
    else
        imagenumber = imagelist.length-1;
 }

然而，ArrayJavascript 中的 s 没有大小限制，它们更像（无限）列表。您几乎无法对它们的长度设置限制 - 特别是不能使用constructor，其 number 参数仅用于初始化目的。

您可以使用数组的length属性来检查您的索引是否在数组边界内：i >= 0 && i < arr.length. 我的代码只是检查该索引处是否有项目（正如您的第二个函数似乎也打算这样做），否则会重置索引。

于 2012-05-16T18:45:33.780 回答
0

我假设单击“下一步按钮”会调用该btnright()函数。

如果是这种情况，那么您正在测试 . 的错误值undefined。您可以将函数重写为：

function btnright(){
  load = imagenumber += 1;
  // Test the value at the index of the array, not your index variable.
  if (imagelist[load] === undefined) {
    load = imagenumber-= 1;
  }
  document.getElementById('lightboxcontent').innerHTML = imagelist[load];
}

从风格上讲，这仍然不是最好的。您的load变量不是必需的，因为它的值总是重复的imagenumber。您可以重构函数，例如：

function btnright() {
  // If we have a new array value do something.
  if (imagelist[imagenumber + 1] !== undefined) {
    // Increment the index and load the new image.
    document.getElementById('lightboxcontent').innerHTML = imagelist[++imagenumber];
  }
}

function btnleft() {
  // If we're not on the first image do something.
  if (imagenumber !== 0) {
    // Decrement the index and load the new image.
    document.getElementById('lightboxcontent').innerHTML = imagelist[--imagenumber];
  }
}
于 2012-05-16T18:53:23.633 回答