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

当我在console.log(f);中添加function IR()时，无论我是否点击了＆＃34; x＆＃34;在＆＃34;苹果＆＃34;或者＆＃34;榴莲＆＃34;，传递的f值将始终为＆＃34; Pineapples＆＃34;。这有什么问题？

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;");
    ...
    ...
});

Answer 2

因为变量的范围＆＃34; i＆＃34;是全球性的，因此var f = array[i];会产生var f = array[3];，因此您只能获得＆＃34; Pineapples＆＃34;。我会给你一个简单的示例代码来理解这个问题。请运行以下代码。

    <script>
var funcs = [];
for (var i = 0; i < 3; i++) {          // let's create 3 functions
    funcs[i] = function() {            // and store them in funcs
        console.log("My value: " + i); // each should log its value.
    };
}
for (var j = 0; j < 3; j++) {
    funcs[j]();                        // and now let's run each one to see
}
</script>

你只会得到3，因为＆＃34;我＆＃34;在全球范围内。

Answer 3

使用 var 声明变量时，它将在函数范围内声明。这就是为什么当你点击'x'时，javascript会将变量的最后一个值传递给IR函数 - “Pineapples”和Pineapples的div。如果要在'for'循环范围内声明变量，请使用 let 。在这种情况下，在'for'循环的每个循环中，javascript将创建一个新的变量f和F.

var array = new Array("Apple","Mangosteen","Durian","Pineapples");

function B() {
    var BP = $("<div></div>");
    BP.text("Click \"x\" on items to be removed").append("<br/>");
    for (var i=0;i<array.length;i++) {
        let f = array[i];
        let 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;");
        F.append(N).append(d)
        BP.append(F)
      }
}
function IR(f,F) {
    var a = array.indexOf(f);
    array.splice(a,1);
    F.remove();
}

Javascript - 删除数组项目＆amp; DOM

3 个答案: