在 jquery 函數中無法識別 JavaScript for 循環中的“i”值

Question

我正在使用 jQuery 和 ajax 打開引導模式窗口。 我的代碼在不循環時完美運行，並且我的內容在模式窗口中正確顯示。 但是我在頁面上有五個模態，自然我想使用 for 循環，所以我不會重復我的代碼五次。

寫一個for循環來執行5次代碼似乎很容易，但不知何故，出現了問題，當我將代碼放入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 變量？ 或者我的代碼中是否存在我忽略的錯誤？

順便說一句，我注意到有人問過類似的問題，但由於寫得不清楚而被否決了。 我已經閱讀了所有內容，但它們沒有回答我今天提出的問題。

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 閉包如何工作？

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