JQuery 和 Javascript 淡入淡出不起作用

Question

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>

Answer 1

您看到此消息的原因是，cual变量将在回调执行时保存#c3的值。由于cual是在全局范围内定义的，而不是在回调作用域中定义的，因此它不绑定到回调 scoe。

有一个

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

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

Answer 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;
}

它有效。

Answer 3

（根据注释更新）

变量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 );