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


“i” value in javascript for loop is not being recognized in a jquery function

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
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'的其他文件)。相反，打开时只会出现一个空白的深色背景。

1
2
3
4
5
6
7
8
9
10
11
12
13
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变量？或者我的代码中有一个我忽略的错误？

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

相关讨论

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    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);
                }
            });
        });
    });

这里的问题是你(无意中)通过闭包引用变量(i)。

由于范围由JavaScript中的函数决定，因此将on用法包装为另一个(立即调用的)函数，以便保存唯一的i：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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闭包如何工作？

相关讨论