CODEWITHSUNDEEP
javascriptjqueryimage
Matt Stacey
Matt Stacey

Reputation: 109

Jquery switch between 2 images not working

I've tried many different blocks of code, but I cannot get this to work. I'm trying to do something very simple-switch between 2 images onclick. I tried many solutions on this forum to no avail. Is it different when the page is within an iframe? Could there be a path issue to the images?

Heres my code:

JS

$("#infoToggler img").click(function() {
    window.alert('hi');
    $(this).find('img').toggle();
});

HTML

<div id="infoToggler"> 
    <img src="bkramer1.jpg" />
    <img src="bkramer2.jpg" style="display:none"/>          
</div>

Upvotes: 1

Views: 2049

Answers (5)

j809
j809

Reputation: 1499

You are doing $("#infoToggler img"), which selects all images inside element with id #infoToggler.

So no need to find img again.

You are getting it wrong way, try this way:

$("#infoToggler img").click(function() {
    window.alert('hi');
    $("#infoToggler img").toggle();
});

Yes, you will have to toggle both.

Look here, gives you an example : http://jsfiddle.net/mz47F/

Upvotes: 0

u54r
u54r

Reputation: 1805

Here is a working example that you can toggle between two images.

http://jsfiddle.net/6WQTz/

$("#infoToggler img").click(function() {
  $('img:first').toggle();
  $('img:last').toggle();
});

Upvotes: -1

Will B.
Will B.

Reputation: 18426

Apply your click event to your wrapper, then toggle the visibility of the images like so.

$("#infoToggler").click(function() {
   $(this).find('img').toggle();
});

Upvotes: 0

Baximilian
Baximilian

Reputation: 885

Here is working sample

$("#infoToggler img").click(function() {
   $("#infoToggler img").toggle(); //you need to toggle images both
});

and a FIDDLE

Upvotes: 6

JasonGanub
JasonGanub

Reputation: 48

This will solve your problem if you're willing to change your jquery function to "ready" instead of "click"

Changing image src onClick with jQuery

Upvotes: 0

Related Questions