код не работает в режиме цикла

Question

У меня есть этот код, который работает без проблем:

<script>
    $(document).ready(function () {
            $(".block1").click(function () {
                $("#fade1").fadeIn("slow").fadeOut("slow");
            });
    });

    $(document).ready(function () {
            $(".block2").click(function () {
                $("#fade2").fadeIn("slow").fadeOut("slow");
            });
    });
</script>

Однако, поскольку у меня есть шесть блоков, я пытаюсь изменить его на цикл:

$(document).ready(function () {
     for (i=1; i<7; i++) {
         alert(i);
         $(".block"+i).click(function () {
             $("#fade"+i).fadeIn("slow").fadeOut("slow");
             alert (i);
         });
     }
});

Этот цикл for не работает должным образом. Это дает всем 6 блокам предупреждение, как и ожидалось, но вместо каждого предупреждения, читающего «block1», «block2», «block3» и т. Д., Все они говорят «block7».

Кто-нибудь знает, почему это происходит?

Answer 1

Если вы добавите общий класс к своим div-элементам, вы можете сделать это без цикла.

Обновление:

Это не на 100% ясно, что вы пытаетесь сделать, но вотметод, который может работать с использованием jquery data .

<div class="animate-block" data-fadeid="fade1"></div>
<div class="animate-block" data-fadeid="fade2"></div>
<div class="animate-block" data-fadeid="fade3"></div>
<div class="animate-block" data-fadeid="fade4"></div>

<div id="fade1"></div>
<div id="fade2"></div>
<div id="fade3"></div>
<div id="fade4"></div>

<script>
$(document).ready(function () {
        $(".animate-block").click(function () {
            var fadeId = $(this).data("fadeid");
            $("#"+fadeId).fadeIn("slow").fadeOut("slow");
        });
});
</script>

Если ваши div-блоки и div-замирание находятся рядом друг с другом, это становится еще проще, поскольку вы можете использовать next () метод.

<div class="animate-block"></div>
<div id="fade1"></div>
<div class="animate-block"></div>
<div id="fade2"></div>
<div class="animate-block"></div>
<div id="fade3"></div>
<div class="animate-block"></div>
<div id="fade4"></div>

<script>
$(document).ready(function () {
        $(".animate-block").click(function () {
            $(this).next().fadeIn("slow").fadeOut("slow");
        });
});
</script>

Answer 2

Вам необходимо создать замыкание для захвата текущего значения i, чтобы при увеличении i оно не влияло на предыдущие вызовы.Примерно так:

http://jsfiddle.net/UD5sf/

$(document).ready(function() {
    for (var i = 1; i < 7; i++) {
        alert(i);
        $(".block" + i).click(doIt(i));
    }

    function doIt(i){
        return function(){
            alert(i);
        }
    }
});

PS: Не стесняйтесь кричать на меня, если я использовал термин closure неправильно.

Answer 3

, но когда я нажимаю кнопку, всегда получаю 7 предупреждений.

Я не совсем уверен, что вы имеете в виду здесь, но вы имеете в виду, что второе предупреждение всегда отображает "7"? Если это так, то это потому, что ваши onclick функции зафиксировали переменную i. Вы не захватываете копию из i, а вместо этого каждая функция захватывает ссылку на нее. Таким образом, к тому времени, когда вы нажимаете кнопку, она имеет значение 7.

Answer 4

Вместо того, чтобы назначать различное имя класса каждому элементу и добавлять номер, чтобы найти тот, который вы ищете, просто назначьте им одинаковое имя класса:

$(document).ready(function(){
    $(".block").click(function(){
        $(this).children(".fade").fadeIn("slow").fadeOut("slow"); 
        alert($(".block").index(this)); //gets the block index
    });
});

Answer 5

Это потому, что к тому времени, когда ваше событие запускается, цикл завершается, и все они используют последнее значение в i, а не значение, которое было при регистрации события.

Это должно работать для селектора,

$(".block"+i).click(function ()

Это должно генерировать "block1", "block2" и т. Д. И назначать событие.

$("#fade"+i).fadeIn("slow").fadeOut("slow");
alert (i);

эти строки, хотя все они используют i,и i остается живым как замыкание, и мне назначается от 1 до 7, и к тому времени, когда ваше событие запускается, i = 7, поэтому каждый раз, когда вы нажимаете «.block1» и т. д., он будет только исчезать # fade7 и помещатьalert (7).

Попробуйте как:

$(document).ready(function () {
    for (i=1; i<7; i++) {
        alert(i);
        (function (i) {
            $(".block"+i).click(function () {
                $("#fade"+i).fadeIn("slow").fadeOut("slow");
                alert (i);
            });
        })();
    }
});

Answer 6

Ваша проблема заключается в том, что ваша функция щелчка использует глобальное значение i (7), а не статическое значение с момента присоединения функции.

Вы хотите связать текущее значение i с функцией щелчка.Есть несколько способов сделать это.Проще всего сделать статическую функцию.Попробуйте:

$(document).ready(function () {
  for (var i=1; i<7; i++) {
    alert(i);
    var click_func = new Function(
      "$('#fade" + i + "').fadeIn('slow').fadeOut('slow');
       alert(" + i + ");");

    $(“.block”+i).click(click_func);
  }
}); 

Answer 7

Причина, по которой это происходит, в том, что «i» - это переменная, которая сохраняется после того, как вы настроили все функции .click. Это означает, что после того, как ваш цикл завершен, у меня есть значение 7. Когда вы щелкаете блок и активируете его функцию оповещения, оповещение использует значение i в тот момент времени, который всегда равен 7, потому что цикл уже завершен работает.