Changing images in loop doesn't work
سؤال
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 !!
المحلول
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>
نصائح أخرى
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
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...
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);
});