在jQuery中使用.click时如何设置src属性以更改图像

Question

I am trying to change an image using jquery upon clicking. So when I click on an image it appears on the viewport then I click on another image above it and it changes to that image and then a third. When I try it only clicks on one image.

HTML CODE:

<div id="vacationimages">
<p>Click on the Image that best represents the kind of vacation you want</p>
<p><img src="mountain.jpg" alt="Mountain Vacation"><br /><br /></p>
<p><img src="desert.jpg" alt="Desert Vacation"><br /><br /></p>
<p><img src="ocean.jpg" alt="Ocean Vacation"><br /><br /></p>
</div>

<div id="bigimage">
<img id="currentimage" src="ocean.jpg" alt="ocean vacation">
<p id="imagedesc"></p>
</div>

jQuery Code:

  $("#vacationimages", "src").click(function(){

 $("#firstname").text("");

 $("#bigimage").show("slow");

   var myfirst = $("#firstname").val();

  $("#currentimage").attr("src", "ocean.jpg");

   $("#currentimage").attr("src", "desert.jpg");

Only the 2nd image displays despite me having different images on the same page.

Answer 1

Use "on" vs. "click" because it will then work for dynamically added elements, and save you headaches later. After that it's simply populating the image properties with those you gathered from the clicked image or $(this) in the scope of your function.

 $(function() { $("#vacationimages img").on("click", function() { $("#currentimage").attr("src", $(this).attr("src")); $("#imagedesc").html($(this).attr("alt")); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="vacationimages"> <p>Click on the Image that best represents the kind of vacation you want</p> <img src="http://fillmurray.com/30/30.jpg" alt="Mountain Vacation"> <img src="http://fillmurray.com/32/32.jpg" alt="Desert Vacation"> <img src="http://fillmurray.com/34/34.jpg" alt="Ocean Vacation"> </div> <div id="bigimage"> <img id="currentimage" src="" alt=""> <p id="imagedesc"></p> </div> 

Another common approach in a scenario like this is to use an anchor tag around the img ( <a> ) and populate it's rel attribute with a larger source image, if what you're going for is click a thumbnail to view a larger image. In that case you bind the event listener to the anchor (not the image) and change the src to the anchor's rel (as opposed to the src of the img inside the anchor).

Answer 2

 $("#vacationimages img").on("click",function(){ $("#bigimage img").attr("src",$(this).attr("src")); $("#bigimage p").text($(this).attr("alt")); }); $("#submitme").on("click",function(){ $("#mymessage").text($("#name").val()+" You want a "+$("#imagedesc").text()); }); 

 img { height:32px; width:32px } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="vacationimages"> <p>Click on the Image that best represents the kind of vacation you want</p> <label>Name:<input type="text" id="name"></label><br><br> <img src="https://image.flaticon.com/icons/png/128/181/181549.png" alt="Mountain Vacation"><img src="https://image.flaticon.com/icons/png/128/148/148766.png" alt="Desert Vacation"> <img src="https://image.flaticon.com/icons/png/128/138/138662.png" alt="Ocean Vacation"> </div> <div id="bigimage"> <img id="currentimage" src="ocean.jpg" alt="ocean vacation"> <p id="imagedesc"></p> </div> <br><br> <div id="submitdiv"> <input id="submitme" type="button" value="Submit ME"> <p id="mymessage"></p> </div>