javascript for循环中的"i"值未在jquery函数中被识别

Question

我正在使用jquery和ajax打开一个bootstrap模态窗口.不在循环中时,我的代码工作正常,我的内容在模态窗口中正确显示.但是我在页面上有五个模态,自然我想使用for循环,所以我不会重复我的代码五次.

编写for循环来执行代码五次似乎是明智的,但不知何故,存在问题,当我将代码放入for循环时,模态内容将不会显示在打开的窗口中.

下面是我需要它的代码,因此我的modal1.php文件中的模态内容显示在一个模态弹出窗口中.请注意,i变量使用了三次; 一次在jquery选择器中,两次在$ .ajax(...)区域:

var i = 1;

$('#modal' + i).on('show.bs.modal', function(e) {
    var id = e.relatedTarget.dataset.id;
    $.ajax({
        type:'post',
        url:'modals/modal' + i + '.php',
        data:{id:id},
        success:function(data){
            $('#modal' + i).html(data);
        }
    });
});

下面的代码使用变量i与上面的代码完全相同.但是,使用下面的代码,modal1.php内容不会显示(也不会显示任何名为'modal [i] .php'的其他文件).相反,打开时只会出现一个空白的深色背景.

for (i = 1; i < 6; i++) {
    $('#modal' + i).on('show.bs.modal', function(e) {
        var id = e.relatedTarget.dataset.id;
        $.ajax({
            type:'post',
            url:'modals/modal' + i + '.php',
            data:{id:id},
            success:function(data){
                $('#modal' + i).html(data);
            }
        });
    });
}

所以我不明白为什么代码的$ .ajax()区域不能识别for条件中的i变量,但它会在初始jquery选择器$('#modal'+ i)中识别它,我已经测试过,发现它是真的.有没有办法可以编写这个循环,以便ajax区域能识别i变量？或者我的代码中有一个我忽略的错误？

顺便说一下,我已经注意到已经提出了类似的问题,但是由于没有明确写出来,它们被低估了.我已经把它们全部读了,但它们没有回答我今天的问题.我已尽力使这个问题清晰简洁.如果您需要更多信息,请与我们联系.

Answer 1

这里的问题是你（无意中）i通过闭包引用了一个变量（）。

由于作用域是由 JavaScript 中的函数决定的，因此请使用另一个（立即调用的）函数包装您的用法，以便保存on唯一的：i

for (i = 1; i < 6; i++) {
    (function() {
        var iModalNumber = i;
        $('#modal' + iModalNumber).on('show.bs.modal', function(e) {
            var id = e.relatedTarget.dataset.id;
            $.ajax({
                type:'post',
                url:'modals/modal' + iModalNumber + '.php',
                data:{id:id},
                success:function(data){
                    $('#modal' + iModalNumber).html(data);
                }
            });
        });
    }());
}

这些问题之所以被否决，是因为对关闭的问题/误解非常普遍。诚然，这是一个很难理解的概念，但你的问题写得很好。

更多信息：JavaScript 闭包如何工作？