Javascript - 删除数组项和 DOM

Question

我正在尝试学习 Javascript，所以我编写了一些代码，但是我可以这样做

var array = new Array("Apple","Mangosteen","Durian","Pineapples");
...
...
function B() {
    ...
    ...
    var BP = $("<p></p>");
    BP.text("Click \"x\" on items to be removed").append("<br/>");
    for (i=0;i<array.length;i++) {
        var f = array[i];
        var F = $("<div></div>");
        F.attr({"class":"f"});
        var N = $("<span></span>");
        N.attr({"class":"n"});
        N.text(f);
        var d = $("<span></span>");
        d.attr({"class":"cc sl"});
        d.bind("click", function(e){
            e.stopPropagation();
            e.preventDefault();
            IR(f,F);
        });
        d.html("&times;");
    ...
    ...
}
function IR(f,F) {
    var a = array.indexOf(f);
    array.splice(a,1);
    F.remove();
}

当我在 function IR() 中添加 console.log(f); 时，传递的值将始终为“Pineapples”，无论我是否单击“x”在“苹果”或“榴莲”上，传递的 f 值将始终是“菠萝”。这是什么问题？

Answer 1

您在 for 循环内调用一个函数 - 您可以在此处阅读更多信息 JavaScript closure inside loops – simple practical example .

现在，如果您使用的是 ES6。解决这个问题的最简单方法是在 for 循环中使用 let。

for (let i=0;i<array.length;i++) { ...... }

或者，使用 Array.forEach() 而不是 for 循环。

在你的情况下应该是这样的

array.forEach(function(fruit) {
        var f = fruit;
        var F = $("<div></div>");
        F.attr({"class":"f"});
        var N = $("<span></span>");
        N.attr({"class":"n"});
        N.text(c);
        var d = $("<span></span>");
        d.attr({"class":"cc sl"});
        d.bind("click", function(e){
            e.stopPropagation();
            e.preventDefault();
            IR(f,F);
        });
        d.html("&times;");
    ...
    ...
});