Changing images in loop doesn't work

Question

I use a for loop to show all elements via jQuery in this one function:

<script> 
$(function() {
    var number_menus = 9;
    for (i = 1; i <= number_menus; i++) {
        var p1 = +i;
        $(".wm_" + i).show()
            .css("background-image", "url(imagenes/footer/m/" + i + ".png)");

        $(".wm_" + i).mouseover(function() {
            $(this).css(
                "background-image", 
                "url(imagenes/footer/m/" + i + "_down.png)"
            );
            alert("this_down.png");
        });

        $(".wm_" + i).mouseout(function() {
            $(this).css(
                "background-image", 
                "url(imagenes/footer/m/" + i + ".png)"
            );
        });
    }
});​
</script>

By other side i have this code for show all elements or images loading and create mouseover effect :

<div id="web_footer_publi">
  <div id="web_footer_marks" class="wm_1"></div> 
  <div id="web_footer_marks" class="wm_2"></div> 
  <div id="web_footer_marks" class="wm_3"></div> 
  <div id="web_footer_marks" class="wm_4"></div>
  <div id="web_footer_marks" class="wm_5"></div> 
  <div id="web_footer_marks" class="wm_6"></div> 
  <div id="web_footer_marks" class="wm_7"></div> 
  <div id="web_footer_marks" class="wm_8"></div>
  <div id="web_footer_marks" class="wm_9"></div>
</div>

When create the function think in show in loop all posibilities for all classes but when i go over images this show me other images of loop and works bad , i want , please , tell me what´s bad in this code for works with it

Thank´s !!

Answer 1

I think this is caused because of context. Create a closure inside the loop so the code executes straight away. There should be other ways to solve this too.

 <script> 
    $(function() {
        var number_menus = 9;
        for (i = 1; i <= number_menus; i++) {

    (function(i){

            var p1 = +i;
            $(".wm_" + i).show().css("background-image", "url(imagenes/footer/m/" + i + ".png)").mouseover(function() {
                $(this).css("background-image", "url(imagenes/footer/m/" + i + "_down.png)");
                alert("this_down.png");
            }).mouseout(function() {
                $(this).css("background-image", "url(imagenes/footer/m/" + i + ".png)");
            });

    })(i);

        }
    });​
</script>

Answer 2

instead of doing mouseover and mouseout use a bit of CSS usign :hover selector

<style>
.wm_1 {
  background-image: url(imagenes/footer/m/1.png);
}
.wm_1:hover {
  background-image: url(imagenes/footer/m/1_down.png);
}
</style>

no JS is needed

repeat this CSS for the rest nodes- 2,3,4...9

Answer 3

Typically you would have a common class on all the elements that you can use to target all of them collectively; for example, in your case, it might be class='wm'. The class attribute does not have to be unique (whereas id does), so that is a reasonable class to have in common. Even if they are just similar, however, you don't need a for-loop -- just use the attribute-starts-with selector which can be used to target them all at once. For indexing, the property setters all have a method signature which accepts a function that can provide the index as a parameter.

$(document).ready(function() {
    var $specialDivs = $("div[class^='wm'");

    $specialDivs
        .show()
        .css("background-image", function (i) {
            return "url(imagenes/footer/m/" + i + ".png)";
        });
        .mouseenter(function() {
            $(this).css("background-image", function (i) {
                return "url(imagenes/footer/m/" + i + "_down.png)";
            });
            alert("this_down.png");
        });
        .mouseleave(function() {
            $(this).css("background-image", function (i) {
                return "url(imagenes/footer/m/" + i + ".png)";
            });
        });
});

However, all of this is only useful if you actually have something specific to do (see correction) with these nodes, as opposed to a simple css effect on hover; those should be done with simple css:

div[class^='wm']:hover {
    background-image: ...;
}

-As a correction to the above, I suppose the fact that you have different background images for each one is a good enough reason to use JS rather than adding n css rules to handle each of your special blocks...

Answer 4

Try this approach and see if it works

$(function() {
    var number_menus = 9;
    (function() { for (i = 1; i <= number_menus; i++) {
        var p1 = +i;
        $(".wm_" + i).show().css("background-image", "url(imagenes/footer/m/" + i + ".png)");
        $(".wm_" + i).mouseover(function() {
            $(this).css("background-image", "url(imagenes/footer/m/" + i + "_down.png)");
            alert("this_down.png");
        });
        $(".wm_" + i).mouseout(function() {
            $(this).css("background-image", "url(imagenes/footer/m/" + i + ".png)");
        });
    } })(i);
});​