Question

Hi there Stack Overflow,

I’m new at learning jQuery and just trying to condense some sample code down, how would I go about the following.

On mouseover of #navweb, select all elements with a class of .web and then change the background of each of these elements to url(back/”+ i +”.png) where i is the JS loop, and then fadeIn these new backgrounds.

Here’s the JS i have at current which works (except for the fadeIn)

function showweb() {
for(var i=1; i < 45; i++){
var el = document.getElementById("im"+(i));
if(el && /web/.test( (el ||{}).className)){
  el.style.backgroundImage = "url(back/"+ i +"col.png)";}
}
}

function hideweb() {
for(var i=1; i < 45; i++){
    var el = document.getElementById("im"+(i));
    if(el && /web/.test( (el ||{}).className)){
      el.style.backgroundImage = "url(back/"+ i +".png)";}
    }
}

I started and got to something like this but it doesn’t work, becasue i know its not complete, can you use counters in jQuery?

$('#navweb').mouseover(function(){

var i = 1;
$(".web").each(function(){
$(this).css('background-image', 'url(back/" + i + ".col.png)'); 
i += 1;
});

});

Many thanks to all replies.

EDIT:
Thanks to all replies, Guffa’s proved the most ideal and condensed for my use; I have also added the fadeIn() method but doesn’t seem to be triggering on the mouseover?

$('#navweb').mouseover(function(){

  $(".web").each(function(){
    var i = parseInt(this.id.substr(2));
    $(this).css('background-image', 'url(back/' + i + 'col.png)').fadeIn(1000); 
  });

});

Answer 1

You can get the number from the id of the element:

$('#navweb').mouseover(function(){

  $(".web").each(function(){
    var i = parseInt(this.id.substr(2));
    $(this).css('background-image', 'url(back/' + i + '.col.png)'); 
  });

});