Javascript jQuery数组元素返回未定义的内部单击函数

请参见底部的更新

我99%确定我的问题是范围问题，但我不确定它为什么会引起问题。我对JS/jQuery中的作用域的理解显然不是它应该在的地方

jsFiddle：

请原谅分号，这是PHP遗留下来的习惯

我有一个动态创建的图像列表，作为一个学习练习，我尝试创建一个自定义的lightbox，允许您滚动浏览它们。（显示缩略图的胶片条已经工作）

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

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

在lightbox中，我尝试使用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');
                });                 

            }               
        }
    }

在循环结束后，它似乎起作用了，虽然我现在对数组的位置和相关条件有一些奇怪的问题，但我想我可以找出那部分

除非有人有更好的办法？我还更新了JSFIDLE：

另一次更新

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

已解决

谢谢你的帮助：）

---

最后一个JSFIDLE给未来可能想要这个例子的读者：

我不擅长解释这些东西，但是，我会尝试用简单的英语来解释

在for循环中，一切正常，我们知道什么是

imgaray

，我们知道什么是

i

，然后我们创建一个函数，该函数稍后在单击事件时触发。发生这种情况时，我们不再知道

i

，也可能不知道

imgaray

，因此您将得到一个错误

---

请参阅类似的问题，并给出比我更好的解释。问题是什么。

你能做一个JSFIDLE吗？你不应该在循环中绑定你的单击处理程序，你最终绑定了多个处理程序，这可能不是你想要的。是的，等一下，我上传了一些图片并提取了相关代码……对不起，以前从未问过JS问题。对我来说，这似乎是一个关闭问题。问题区域中

i

的值是多少？它是否等于

imgaray.length-1

？我想我应该是循环的任何迭代？所以在这个测试用例中，有3个元素，第一次运行应该是0，第二次运行应该是1，等等。谢谢Emil，在循环中使用click函数肯定是我的主要问题。现在我只是在数组方面遇到了一些问题，但我想我可以解决这一部分：）没问题，很抱歉解释得不好，英语不是我的母语，我从未真正学习过范围和其他定义。我在心里理解它是如何工作的，但有时很难解释。我以为所有变量在JS中都是全局变量，但我猜不是！再次感谢你。

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');
                });                 

            }               
        }
    }

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

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