Javascript 命令的组合不会'；t在for循环中工作

大家，这真的很奇怪，我都快疯了。这似乎很奇怪

它只是简单地获取一个元素，比如p或li，使其消失，更改其文本，然后重新出现

它在for循环外工作得非常完美，但在for循环内，它不工作！，当您需要根据某些条件更改x个元素的数量时，循环始终是最佳选择

我准备了一把小提琴：

不管怎样，我也要在这里写代码：

CSS JAVASCRIPT

//文档就绪函数
$（document）.ready（函数（）{createAll（）；}）；
//函数，该函数为click和一些无序列表元素创建一个Div
函数createAll（）
{
var clk=document.createElement（“div”）；
clk.id=“clk”；
onclick=function（）{disreapper（）；}；
clk.innerHTML=“单击我！”；
$（document.body）.append（clk）；
var Father=document.createElement（“div”）；
$（document.body）.append（父亲）；
var MainList=document.createElement（“li”）；
MainList.id=“idMainList”；
MainList.innerHTML=“”；
父亲、子女（主要名单）；
//现在另一个嵌套的：
var NewNested=document.createElement（“ul”）；
父。子（新嵌套）；
//现在，我要告诉你
var NN1=document.createElement（“li”）；
NN1.id=“idNN1”；
NN1.className=“Disc”；
NN1.innerHTML=“”；
NewNested.appendChild（NN1）；
var NN2=document.createElement（“li”）；
NN2.id=“idNN2”；
NN2.className=“Disc”；
NN2.innerHTML=“”；
NewNested.appendChild（NN2）；
var NN3=document.createElement（“li”）；
NN3.id=“idNN3”；
NN3.className=“Disc”；
NN3.innerHTML=“”；
NewNested.appendChild（NN3）；
var NN4=document.createElement（“li”）；
NN4.id=“idNN4”；
NN4.className=“Disc”；
NN4.innerHTML=“”；
NewNested.appendChild（NN4）；
var NN5=document.createElement（“li”）；
NN5.id=“idNN5”；
NN5.className=“Disc”；
NN5.innerHTML=“”；
NewNested.appendChild（NN5）；
}
//当我们点击div时发送的函数（ClickMe！）。有件事我不明白：
函数disreapper（）
{
//这使得“主列表”在0.2秒内消失
$（“#idMainList”）.css（{“不透明度”：“0.0”，“转换”：“0.2s”，“-webkit转换”：“0.2s”）；
//这将在0.2秒后更改“MainList”文本（nodeValue）
setTimeout（function（）{$（“#idMainList”）.text（“Hello”）}，200）；
//这使得“MainList”在0.2秒后的0.2秒内重新出现（因此，在文本更改后）。
setTimeout（function（）{$（“#idMainList”）.css（{“不透明”：“1.0”，“转换”：“0.2s”，“-webkit转换”：“0.2s”}），200）；
//好的。现在相同，但对于for循环中的5个元素：
对于（var chg=0；chg噢，我喜欢这类问题：）

这是因为
chg
变量快速增加到6，然后执行设置超时，并且该变量的值已过时

这就解决了这个问题：

for (var chg=0; chg<5; chg++)
{
    (function(chg){
        //Dissapears
        $("#idNN"+String(chg+1)).css({"opacity":"0.0", "transition":"0.2s", "-webkit-transition":"0.2s"});
        //Text (nodeValue) change
        setTimeout(function(){$("#idNN"+String(chg+1)).text("Hello")}, 200);
        //Reappears (doesn't works and no idea of why!)
        setTimeout(function(){$("#idNN"+String(chg+1)).css({"opacity":"1.0", "transition":"0.2s", "-webkit-transition":"0.2s"})}, 200);
    })(chg);                
}

诀窍在于循环的每一步“创建”一个不同的
chg
变量，因为它不再被共享，所以不会被覆盖

干杯，来自玻利维亚拉巴斯
你知道你能做到：
$（文档）。准备好（createAll）
而不是您所做的。只是一个注释。与
clk.onclick=Disreapear
相同。例外情况是，当您有一组参数要传递给函数时。感谢PHPglue一点，从现在开始，当0.2秒后超时开始时，我将使用它，“chg”是不同的，超时读取的函数带有错误的chg，不是吗？各位，你们太不可思议了。我需要知道闭包的情况。提前谢谢！！。确切地说，它的值在以后就过时了：）你们能投票支持我的答案并将其标记为已接受吗？（绿色复选标记）.thanks我刚刚发现了upvote。我不能upvote你，它说：需要15个声誉。对不起！当我得到它时，我会去做的。绿色复选标记已经完成，非常感谢你的回答，再次感谢！欢迎：）。很高兴它有帮助
//Document Ready function
$(document).ready (function (){createAll();});

//Function that creates a Div for click, and some Unordered List elements
function createAll()
{
    var clk=document.createElement("div");
    clk.id="clk";
    clk.onclick=function(){Disreappear();};
    clk.innerHTML = "ClickMe!";
    $(document.body).append(clk);

    var Father=document.createElement("div");
    $(document.body).append(Father);

    var MainList=document.createElement("li");
    MainList.id="idMainList";
    MainList.innerHTML="<a href='#home' style='text-decoration:none;'>MainList</a>";
    Father.appendChild(MainList);

    //Now another nested one:
    var NewNested=document.createElement("ul");
    Father.appendChild(NewNested);

        //And now, Nested Lis
        var NN1=document.createElement("li");
        NN1.id="idNN1";
        NN1.className="Disc";
        NN1.innerHTML="<a href='http:www.google.com' style='text-decoration:none;'>GoogleCom</a>";
        NewNested.appendChild(NN1);

        var NN2=document.createElement("li");
        NN2.id="idNN2";
        NN2.className="Disc";
        NN2.innerHTML="<a href='http:www.google.es' style='text-decoration:none;'>GoogleEs</a>";
        NewNested.appendChild(NN2);

        var NN3=document.createElement("li");
        NN3.id="idNN3";
        NN3.className="Disc";
        NN3.innerHTML="<a href='http:www.google.it' style='text-decoration:none;'>GoogleIt</a>";
        NewNested.appendChild(NN3);

        var NN4=document.createElement("li");
        NN4.id="idNN4";
        NN4.className="Disc";
        NN4.innerHTML="<a href='http:www.google.de' style='text-decoration:none;'>GoogleDe</a>";
        NewNested.appendChild(NN4);

        var NN5=document.createElement("li");
        NN5.id="idNN5";
        NN5.className="Disc";
        NN5.innerHTML="<a href='http:www.google.fr' style='text-decoration:none;'>GoogleFr</a>";
        NewNested.appendChild(NN5);
}

//Function that dispatches when we click on the div (ClickMe!). There is something I can't understand:
function Disreappear()
{
    //This makes the "MainList" dissapears in 0.2 seconds
    $("#idMainList").css({"opacity":"0.0", "transition":"0.2s", "-webkit-transition":"0.2s"});
    //This changes "MainList" text (nodeValue) after 0.2 secs
    setTimeout(function(){$("#idMainList").text("Hello")}, 200);
    //This makes the "MainList" reappears in 0.2 seconds after 0.2 seconds, (so, after text has changed).
    setTimeout(function(){$("#idMainList").css({"opacity":"1.0", "transition":"0.2s", "-webkit-transition":"0.2s"})}, 200);

    //OK. Now the same, but for 5 elements inside a for loop:
    for (var chg=0; chg<5; chg++)
    {
        //Dissapears
        $("#idNN"+String(chg+1)).css({"opacity":"0.0", "transition":"0.2s", "-webkit-transition":"0.2s"});
        //Text (nodeValue) change
        setTimeout(function(){$("#idNN"+String(chg+1)).text("Hello")}, 200);
        //Reappears (doesn't works and no idea of why!)
        setTimeout(function(){$("#idNN"+String(chg+1)).css({"opacity":"1.0", "transition":"0.2s", "-webkit-transition":"0.2s"})}, 200);
    }
}

for (var chg=0; chg<5; chg++)
{
    (function(chg){
        //Dissapears
        $("#idNN"+String(chg+1)).css({"opacity":"0.0", "transition":"0.2s", "-webkit-transition":"0.2s"});
        //Text (nodeValue) change
        setTimeout(function(){$("#idNN"+String(chg+1)).text("Hello")}, 200);
        //Reappears (doesn't works and no idea of why!)
        setTimeout(function(){$("#idNN"+String(chg+1)).css({"opacity":"1.0", "transition":"0.2s", "-webkit-transition":"0.2s"})}, 200);
    })(chg);                
}

for (var i=0; i<5; i++)
{
    (function(chg){
        //Dissapears
        $("#idNN"+String(chg+1)).css(...
    })(i);                
}