Question

请参阅底部的更新

我99％肯定我的问题是范围，但我不确定为什么它会导致问题。我对JS / jQuery中的范围的理解显然不是应该的。

请原谅分号，这是PHP的一种习惯。

我有一个动态创建的图像列表，作为一个学习练习，我正在尝试创建一个允许您滚动它们的自定义灯箱。（显示缩略图的电影胶片已经有效）

使用此代码将每个链接/ href推送到一个数组中（这似乎工作正常）：

var imgArray = [];

$('.filmstrip a').each(function() {
    imgArray.push($(this).prop("href"));
})

然后是创建灯箱的代码，它也可以正常工作。

在灯箱内部，我尝试使用for循环将正确的href应用于每个左/右导航按钮，具体取决于阵列中当前图像的位置。这一切似乎都按照我期望的方式工作，直到我尝试在链接上使用点击功能淡入/淡出新图像。

如果我只设置$('.next a').prop('href', imgArray[i+1])，它会应用正确的链接地址，但显然只是单独加载图像。

击败我的整个大块是：

if (imgArray.length > 1) {              
        for (var i = 0; i < imgArray.length; ++i) {

            if (i == 0) {

                $('.prev').hide();
                $('.next').show();

    // IF I REFERENCE imgArray[i] HERE, IT WORKS

                $('.next a').click(function(e) {
                    e.preventDefault();

    // INSIDE THE CLICK FUNCTION, imgArray[i] RETURNS UNDEFINED

                    $('#lightbox img').fadeOut('fast');
                    $('#lightbox img').prop('src', imgArray[i+1]);
                    $('#lightbox img').fadeIn('fast');
                });                 

            }               
        }
    }

是的还有其他一些如果和其他人，但我不认为我需要包括额外的50行

建议非常愉快地被接受！

更新

根据Chris Hardie的建议，我将click函数移到循环外部，并在循环内部使用：在每种情况下var pos = imgArray[i]; break;，然后使用

 $('.right a').click(function(e) {
e.preventDefault();

  $('#lightbox img').fadeOut('fast');
  $('#lightbox img').prop('src', pos);
  $('#lightbox img').fadeIn('fast');
 });

循环结束后，它似乎有效，虽然我现在有一些奇怪的问题，关于阵列位置和相关条件现在是什么，但我想我可以想出那部分......

除非有人有更好的方法吗？我还更新了jsfiddle：http://jsfiddle.net/a3N2L/3/

另一次更新

显然我的条件在循环中都是错误的，因为我需要将i与当前的img URL（存储在另一个变量中）进行比较，而不是将数字与...进行比较... DUH

解决

感谢您的帮助：）

可能想要这个例子的未来读者的最终作品：http://jsfiddle.net/a3N2L/4/

Answer 1

我不善于解释这些事情，但是，我会尝试用简单的英语来做。

在你的for循环中，一切都很好，我们知道什么是imgArray，我们知道什么是i，然后我们创建一个稍后在click事件上触发的函数。当发生这种情况时，我们不再知道i，也可能都不知道imgArray，因此您会收到错误。

请参阅this question了解类似问题，并提供更好的解释，而不是我的问题。

jQuery数组元素在单击函数内返回undefined

1 个答案: