Turning Javascript into jQuery

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); 
  });

});

Guffa · Accepted Answer · 2011-07-31 10:51:23Z

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)'); 
  });

});

answered Jul 31, 2011 at 10:51

Guffa

703k111 gold badges760 silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ben Over a year ago

works perfect! thanks. and i would just duplicate this for the mouseout to change the images back to '+ i +'.png. this would make the jquery and JS practically the same length, is there an benefit from using it then?

Guffa Over a year ago

@ben: No, in this case there isn't really any benefit. There are other cases where it makes the code a lot simpler, or where it handles browser specific differences.

Rihards · Accepted Answer · 2011-07-31 10:53:15Z

0

You had a small mistake here: 'url(back/" + i + ".col.png)', it should be like I wrote bellow with single quotes.

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

edited Jul 31, 2011 at 10:53

answered Jul 31, 2011 at 10:31

Rihards

10.3k14 gold badges63 silver badges80 bronze badges

5 Comments

ben Over a year ago

thanks very much, that works but the images it changes the background of are all mixed up im guessing this is because of the count. the images aren't numbered 1, 2, 3, 4; their random like 1,4,6,7. guess im out of luck then?

cillierscharl Over a year ago

could always store the numbers in an array if they are fixed; if you require an example - could provide one. Otherwise more detail on how the images are numbered we could assist.

ben Over a year ago

yes the numbers are always fixed, how would i go about initialising an array for the jquery? thanks

Rihards Over a year ago

@Ben, could you copy the code I've now and try? I had small mistake left there.

ben Over a year ago

thanks to both of you, the code posted by Guffa is ideal as its condensed also. thanks for the answers to my q tho and hopefully ill learn from them

Collectives™ on Stack Overflow

Turning Javascript into jQuery

2 Answers 2

2 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related