JavaScript for 循环中的“i”值在 jquery 函数中未被识别答案

【问题标题】："i" value in JavaScript for loop is not being recognized in a jquery functionJavaScript for 循环中的“i”值在 jquery 函数中未被识别
【发布时间】：2018-04-09 08:17:22
【问题描述】：

我正在使用 jQuery 和 ajax 打开引导模式窗口。我的代码在不在循环中时运行良好，并且我的内容在模式窗口中适当显示。但是我在页面上有五个模态，自然我想使用一个 for 循环，所以我不会重复我的代码五次。

写一个for循环来执行代码五次似乎很容易，但不知何故，有一个问题，当我将代码放入for循环时，模态内容不会显示在打开的窗口。

这是我需要的代码，因此我的 modal1.php 文件中的模态内容显示在模态弹出窗口中。请注意，i 变量被使用了 3 次；一次在 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 变量？还是我忽略了我的代码中的错误？

顺便说一句，我注意到有人问过类似的问题，但由于没有清楚地写出来而被否决。我已经阅读了所有内容，但他们没有回答我今天的问题。

【问题讨论】：

我认为您在尝试在 for 循环中注册事件处理程序时遇到了问题。也许这可能会有所帮助？ stackoverflow.com/a/7774659/1729859
问题是 i 的范围在方法之外，因此当模态逻辑执行时它将是 6 的值。您需要创建一个在循环中不可变的范围向下变量。 forEach 或 $.each() 对此有好处，它们将索引传递给回调。
我同意@mituw16。这是涉及同一件事的另一个问题。 stackoverflow.com/questions/750486/…

标签： javascript jquery ajax bootstrap-modal

【解决方案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);
                }
            });
        });
    }());
}

这些问题之所以被否决，是因为对闭包的问题/误解非常普遍。诚然，这是一个难以掌握的概念，而且您的问题写得很好。

更多信息：How do JavaScript closures work?

【讨论】：

这篇文章对我也有帮助，在查看上面的代码时：stackoverflow.com/questions/9053842/…

【解决方案2】：

您可以不使用循环但使用 jQuery .each() 并将值属性添加到您的 html 元素来执行此操作。警告...前面有未经测试的代码。

    jQuery('.modal').each(function(){               // use a class instead of an id
        $(this).on('show.bs.modal', function(e) {    //use $(this) to target
            var i = $(this).val();                   // get the value id            
            var id = e.relatedTarget.dataset.id;    // do your code
            $.ajax({
                type:'post',
                url:'modals/modal' + i + '.php',
                data:{id:id},
                success:function(data){
                    $('#modal' + i).html(data);
                }
            });
        });
    });

【讨论】：