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在每次循环时都会被覆盖，但是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 设置在一个立即调用的函数中，该函数也是 returns 事件监听器回调。这样，本地定义的 elementToFadeIn 将保留在当前循环迭代中传入的名称。

–––––

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

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

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

Answer 2

你看到这个的原因是因为 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 3

脚本在页面加载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;
}

而且有效。

JQuery 和 Javascript 淡入淡出不起作用

JQuery and Javascript fade not working

html

javascript

jquery

element

fadein