Question

i have this code, that works without any problem:

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

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

However, as i have six blocks i am trying change it to a loop:

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

This for loop isn’t working as expected. It’s giving all 6 blocks an alert, as expected, but instead of each alert reading “block1”, “block2”, “block3”, etc., they all say “block7”.

Does anyone know why this is happening?

Answer 1

If you add a shared class to your divs, you could do it without a loop.

Update:

Its not 100% clear what you are trying to do, but here’s a method that could work using 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>

If your block divs and fade divs are next to each other, it becomes even simpler since you can use the next() method.

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