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

Скрипт загружается после 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 2

(Обновление на основе комментариев)

Переменная 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); 

Answer 3

Причина вы видите это происходит потому, что переменная 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; 
}