JQuery 和 Javascript 褪色不起作用答案

【问题标题】：JQuery and Javascript fade not workingJQuery 和 Javascript 褪色不起作用
【发布时间】：2015-04-19 15:28:46
【问题描述】：

Jquery 和 Javascript 会做一些奇怪的事情。如果您查看代码，则有一个“while”循环。它执行 3 个循环，但仅淡化最后一个 (#c2)。
这是我的代码：

<div style="display:none" id="c0">Element 0</div>
<div style="display:none" id="c1">Element 1</div>
<div style="display:none" id="c2">Element 2</div>
<script>
var count = 0;
var exit = false;
var time = 300;

while(exit == false){
    if(document.getElementById("c" + count)){
        cual = "#c" + count;
        $(document).ready(function(){
            $(cual).fadeIn(time);
        });
    }
    else
        exit = true;
    count++;
    time += 100;
}

</script>

【问题讨论】：

How do JavaScript closures work? 的可能重复项

标签： javascript jquery html element fadein

【解决方案1】：

您看到这个的原因是因为cual 变量将在回调执行时保存值#c3。因为cual是在全局范围内定义的，而不是在回调范围内，所以它不受回调范围的限制。

有一个解决方法，通过添加一个中间函数，如下所示：

function scheduleFade(count) {
    var cual = "#c" + count;
    $(document).ready(function(){
       $(cual).fadeIn(time);
    });
}

while(exit == false) {
    if(document.getElementById("c" + count)) {
        scheduleFade(count);
    } else {
        exit = true;
    }
    count++;
    time += 100;
}

【讨论】：

【解决方案2】：

脚本是在页面加载DOM后加载的，所以不需要使用$(document).ready()。我已经测试了以下脚本：

var count = 0;
var exit = false;
var time = 300;

while(exit == false){
    if(document.getElementById("c" + count)){
        cual = "#c" + count;
        $(cual).fadeIn(time);
    }
    else
        exit = true;
    count++;
    time += 100;
}

它有效。

【讨论】：

【解决方案3】：

（基于cmets更新）

变量cual 在每个循环中都会被覆盖，但ondocumentready 事件监听器中的代码只有在DOM 完全加载后才会执行。此时变量cual只设置为第三个元素的名称。

您可以为该变量创建自己的可见性范围，以使其在事件侦听器回调中可用：

var count = 0;
var exit = false;
var time = 300;

while(exit == false){
    if(document.getElementById("c" + count)){
        cual = "#c" + count;
        $(document).ready((function() {
            var elementToFadeIn = cual;
            return function() {
                $(elementToFadeIn).fadeIn(time);
            }
        })());
    }
    else
        exit = true;
    count++;
    time += 100;
}

这里的变量elementToFadeIn 设置在一个立即调用函数中，该函数也返回事件监听器回调。这样，本地定义的elementToFadeIn 将保留在当前循环迭代中传入的名称。

–––––

另一方面，您使用的是 jQuery，为什么首先需要循环？

只需在页面末尾包含此代码（即在结束 BODY 标记之前）并且您不需要 ondocumentready 事件，因为 DOM 的所有相关部分都已正确加载在结束 BODY 标记之前。

var time = 1000;
jQuery( '[id^="c"]' ).fadeIn( time );

【讨论】：

这是否记录在某处？我不知道有这样的限制。