javascript if else click event

Question

I am trying to add an if else statement to the below

$('#togglediv4').click(function(e){
     e.preventDefault();
    $('#link4').attr('src','images/contact_link_clicked.png');
});

I want the image to change back to the original one if there is no click event otherwise all links once clicked will remain stuck on the new image.

Therefore if image is not clicked I want to show the original image.

$('#link4').attr('src','images/contact_link_original.png');

I lost you half way there...so whatis it exactly that u want??? — geekman
– geekman, Commented Dec 28, 2012 at 9:59
I tried to add if else but cannot get the correct format right — user1347219
– user1347219, Commented Dec 28, 2012 at 10:04

Ram · Accepted Answer · 2012-12-28 10:10:50Z

2

Use attr callback function and ternary operator.

$('#togglediv4').click(function(e){
     e.preventDefault();
     $('#link4').attr('src',function(i, src){
          return src === 'images/contact_link_original.png'
          ? 'images/contact_link_clicked.png'
          : 'images/contact_link_original.png'
     });
});

answered Dec 28, 2012 at 10:10

Ram

145k16 gold badges174 silver badges201 bronze badges

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

Comments

cowls · Accepted Answer · 2012-12-28 10:15:05Z

1

You should just set the src attribute of the original <img> tag to: mages/contact_link_original.png

Then add the click event as above.

By default when your div hasnt been clicked it will contain the original image.

EDIT: based on your comment I would do the following:

Add a class to all the images
When any image is clicked change the src attr back to the original on ALL images with that class. (You can use $('.imgClass'))
Then update the image that was clicked with the new image.

edited Dec 28, 2012 at 10:15

answered Dec 28, 2012 at 10:03

cowls

24.4k9 gold badges51 silver badges78 bronze badges

3 Comments

user1347219 Over a year ago

but once clicked I do want the image to turn back to the original as soon as another image is clicked

user1347219 Over a year ago

this $('.imgclass').attr('src','images/newhome_link.png'); specifies all images within the class, can I specify each image src separately within the class ?

user1347219 Over a year ago

for each click I turned back the other images links to their original images. I specified the src for each image in all functions.

Gareth · Accepted Answer · 2012-12-28 10:10:30Z

0

I may not be understanding your question correctly, but it looks to me like you need to use the mousedown and mouseup events instead of click:

$('#togglediv4').mousedown(function(e){
    e.preventDefault();
    $('#link4').attr('src','images/contact_link_clicked.png');
}).mouseup(function(e){
    e.preventDefault();
    $('#link4').attr('src','images/contact_link_original.png');
});

answered Dec 28, 2012 at 10:10

Gareth

5,7283 gold badges30 silver badges40 bronze badges

2 Comments

user1347219 Over a year ago

unfortunately this works only if the mouse is left clicked down, else it will turn back to original. I want to keep the image changed until another image is clicked

Gareth Over a year ago

@user1347219 Ah, I wasn't understanding your question correctly then. In that case I'd look at undefined's answer.

Chris Laarman · Accepted Answer · 2012-12-28 10:13:04Z

0

I think you are looking for something like this:

$('#togglediv4').click(function(e){
    e.preventDefault();
    if ($('#link4').attr('src') == 'images/contact_link_original.png') {
        $('#link4').attr('src','images/contact_link_clicked.png');
    }       
});

answered Dec 28, 2012 at 10:13

Chris Laarman

1,62713 silver badges25 bronze badges

Collectives™ on Stack Overflow

javascript if else click event

4 Answers 4

Comments

3 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related