How to use jQuery to update the contents of another element

Question

Ok, so I have a list of 5 links one by one. When I hang over one of these links, I need it to expand in size (to distinguish it from others). And when I click on one of these links, I want it to update the image in another element. I figured out how to do this for a single link using JQuery and CSS, but I wonder if I need to create 4 additional (for 4 other links) sets of JQuery functions or if there is a way to save code space using for loops with a counter. My problem with the logic (using only one comprehensive function) is due to the fact that I do not know how to distinguish links after they hang. This makes me think that I need a different set of functions for each link. Any advice is appreciated.

Here is my HTML code:

<div class="interestsMarquee"> <img src="sportsInterest.png" class="trigger" id="interest1" alt="sports" /> <img src="sportsInterest.png" class="trigger" id="interest2" alt="music" /> <img src="sportsInterest.png" class="trigger" id="interest3" alt="hunting" /> <img src="sportsInterest.png" class="trigger" id="interest4" alt="exercise" /> <img src="sportsInterest.png" class="trigger" id="interest5" alt="shopping" /> </div> 

Here is my jQuery code:

  <script> $(function() { var i = '1'; $("#interest"+i).hover(function() { $("#interest"+i).css("width","115%") .css("height","70px") .css("margin-left","-10px"); },function() { $("#interest"+i).css("width","95%") .css("height","56px") .css("margin-left","3px"); }); $('.trigger').css('cursor', 'pointer') .click({id: 'myImage'}, changeImage); function changeImage(e) { var element=document.getElementById(e.data.id) if (element.src.match("images/Cowboys.jpg")) { element.src="images/Countryside_bg.jpg"; } else { element.src="images/Cowboys.jpg"; } } }); </script> 

Answer 1

In this case, you don’t need to use loops or additional JQuery functions, and one selector can match all the elements you need. Also, you should not combine jQuery with pure Javascript code if you do not need it. I am rewriting your code, now everything is in jQuery:

HTML:

 <div class="interestsMarquee"> <img src="sportsInterest.png" class="trigger" data-index="1" id="interest1" /> <img src="sportsInterest.png" class="trigger" data-index="1" id="interest2" /> <img src="sportsInterest.png" class="trigger" data-index="1" id="interest3" /> <img src="sportsInterest.png" class="trigger" data-index="1" id="interest4" /> <img src="sportsInterest.png" class="trigger" data-index="1" id="interest5" /> </div> 

JQuery:

 $(".interestsMarquee img").hover(function(){ $(this).css( "width":"115%", "height":"70px", "margin-left":"-10px" ); },function(){ $(this).css( "width":"95%", "height":"56px", "margin-left":"3px"); }).click(function(){ //Lets get the index of the img var index = ($(this).data('index'); var src = "images/default_img.jpg"; //Switch index to update src switch (index ) { case (1): src = 'images/image1.jpg'; break; case (2): src = 'images/image2.jpg'; break; case (3): src = 'images/image3.jpg'; break; case (4): src = 'images/image4.jpg'; break; case (5): src = 'images/image5.jpg'; break; } //adding the new src to the #myImage div $('#myImage').attr('src', src); }); 

Changes:

• As you use .css , you can click the click() event after hover to match the same selector
• Use $(this) when you are inside the event function
• You can use attr('src') to get the src attribute.
• Changing multiple css properties at once cool

Fiddle: http://jsfiddle.net/sHxR3/

Update: I updated my code to change the external img src div depending on the img clicked.

Answer 2

I will try to answer your question by showing how you can improve your jQuery code and how to solve your problem in one go! :)

First, you can simplify your code by refactoring .css() calls in one call. This will make all the code run faster, since you will not iterate over the same element for every .css() call.

So part of the code will come from

 $("#interest"+i).hover(function() { $("#interest"+i).css("width","115%") .css("height","70px") .css("margin-left","-10px"); },function() { $("#interest"+i).css("width","95%") .css("height","56px") .css("margin-left","3px"); }); 

to

 $("#interest"+i).hover(function() { $("#interest"+i).css({ "width":"115%", "height":"70px", "margin-left":"-10px" }); },function() { $("#interest"+i).css({ "width":"95%", "height":"56px", "margin-left":"3px" }); }); 

and finally, Adil beat me before that, you can bind the hover event to the class instead. And after his advice with selectors is also very good! :)

Hope this helps some! :)

Answer 3

take a look at the jQuery.each () function here

Answer 4

This should work:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="js/jquery.js"></script> <script> $(function(){ $(".interestsMarquee img").hover(function(){ $(this).css({"width":"115%", "height":"70px", "margin-left":"-10px"}); },function(){ $(this).css({"width":"95%", "height":"56px", "margin-left":"3px"}); }).click(function(){ src = $("#myImage").attr("src"); if(src == "images/Cowboys.jpg"){ $("#myImage").attr("src", "images/Countryside_bg.jpg"); }else{ $("#myImage").attr("src", "images/Cowboys.jpg"); } }); }); </script> <title>Untitled Document</title> </head> <body> <div class="interestsMarquee"> <img src="sportsInterest.png" style="cursor:pointer;" alt="sports" /> <img src="sportsInterest.png" style="cursor:pointer;" alt="music" /> <img src="sportsInterest.png" style="cursor:pointer;" alt="hunting" /> <img src="sportsInterest.png" style="cursor:pointer;" alt="exercise" /> <img src="sportsInterest.png" style="cursor:pointer;" alt="shopping" /> </div> <img id="myImage" src="images/Cowboys.jpg" /> </body> </html> 

Hope this helps!