Question

我在循环中使用.load函数循环时出现问题。我从列表框中传入一个值，表示要创建的部分数量。我正在使用Mustache从单独的文件加载模板。这应该创建列表框中的部分数量，但我最终得到的是最后创建的部分，而不是其他任何部分。在通过调试器的代码之后，.load函数不希望在循环的最后一次传递之前触发。。（更改）上的列表框如下：

$(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＆amp; 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;


        }
    }
});

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

1 个答案: