循环内的 .load 似乎只在最后一个循环上触发

Question

我在循环中使用 .load 函数循环时遇到问题。我从一个列表框中传入一个值，该值指示要创建的部分的数量。我正在使用 Mustache 从单独的文件中加载模板。这应该在列表框中创建部分的数量，但我最终只创建了最后一个部分，而没有其他部分。通过调试器跟踪代码，.load 函数在循环的最后一次传递之前不想触发。列表框on.(change)如下：

$(document).on('change', '#SCTotSections', function () {
var sectNumToCreate = parseInt($('#SCTotSections :selected').val(), 10);
var startNumSections = parseInt(startSectNum, 10);
var currentAddSection = startNumSections + 1;
var postTo = '#writeToTest';
if (sectNumToCreate < startNumSections)
{
    if (startNumSections != sectNumToCreate )
    {
        var myNode = document.getElementById("S" + startNumSections)
        myNode.remove();
        //while (myNode.firstChild) {
        //    myNode.removeChild(myNode.firstChild);
        //}
        startSectNum = startSectNum - 1;
        startNumSections = startNumSections - 1;
    }
}
else if (sectNumToCreate > startNumSections)
{
    while (startNumSections != sectNumToCreate)
    {
        var data = {
            section: currentAddSection
        };

        $("#templates").load("../SCSectionTemplate #SCSectionTemplate", function () {
            var template = document.getElementById('SCSectionTemplate').innerHTML;
            var output = Mustache.render(template, data);
            $(postTo).html(output);
        });

        currentAddSection = currentAddSection + 1;
        startSectNum = startSectNum + 1;
        startNumSections = startNumSections + 1;


    }
}
});

Answer 1

我可以看到两个问题。

• 您正在覆盖循环中 postto 的内容，而不是附加到它。
• 循环中使用闭包变量data不正确（见Creating closures in loops: A common mistake & Javascript closure inside loops - simple practical example）。

所以试试

$(document).on('change', '#SCTotSections', function () {
    var sectNumToCreate = parseInt($('#SCTotSections :selected').val(), 10);
    var startNumSections = parseInt(startSectNum, 10);
    var currentAddSection = startNumSections + 1;
    var postTo = '#writeToTest';
    if (sectNumToCreate < startNumSections) {
        if (startNumSections != sectNumToCreate) {
            var myNode = document.getElementById("S" + startNumSections)
            myNode.remove();
            //while (myNode.firstChild) {
            //    myNode.removeChild(myNode.firstChild);
            //}
            startSectNum = startSectNum - 1;
            startNumSections = StartNumSections - 1;
        }
    } else if (sectNumToCreate > startNumSections) {
        //clear the container
        $(postTo).empty('');
        while (startNumSections != sectNumToCreate) {
            var data = {
                section: currentAddSection
            };

            //use a local closure for the data variable
            (function (data) {
                $("#templates").load("../SCSectionTemplate #SCSectionTemplate", function () {
                    var template = document.getElementById('SCSectionTemplate').innerHTML;
                    var output = Mustache.render(template, data);
                    //keep appending new items from the loop
                    $(postTo).append(output);
                });
            })(data);

            currentAddSection = currentAddSection + 1;
            startSectNum = startSectNum + 1;
            startNumSections = startNumSections + 1;


        }
    }
});