jQuery 2nd click to call function

Question

I have the following HTML

<a onclick="hi('#i_15', 'second_img.jpg'); return false;" href="http://google.com">
<img id="i_15" src="first_img.jpg" />
</a>

So, I don't want it to follow to google.com when it's clicked, but instead just call the hi function:

function hi(id, file){
$(id).attr("src", file);
}

This is supposed to enlarge the image (by swapping first_img.jpg to second_img.jpg.) What can I do if I want to swap it back again? As in, click on the swapped image (second_img.jpg) and have it changed back to first_img.jpg; a reversal of what the hi function does.

Are you first_img and second_img named in similar way? like 'image1_small' and 'image1_large' for example? — Brian Glaz
– Brian Glaz, Commented Feb 15, 2012 at 14:34
No, they're not. In fact, they're generated with PHP, but I'm just using HTML here to keep it simple. — q3d
– q3d, Commented Feb 15, 2012 at 14:36

Drew Gaynor · Accepted Answer · 2012-02-15 14:39:28Z

2

As for not navigating to google.com when clicked, you can just change the href to be: href="#".

For the image swap, why not make your hi function work both ways, as a toggle? You could do this:

<a onclick="swapImage('#i_15', 'first_img.jpg', 'second_img.jpg');" href="#" >
    <img id="i_15" src="first_img.jpg" />
</a>

function swapImage(id, firstImage, secondImage) {
    var imageToLoad = $(id).attr("src") == firstImage ? secondImage : firstImage;

    $(id).attr("src", imageToLoad);
}

answered Feb 15, 2012 at 14:39

Drew Gaynor

8,4925 gold badges42 silver badges53 bronze badges

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

6 Comments

Diodeus - James MacFarlane Over a year ago

I would take this further by passing "this" rather than an ID.

Drew Gaynor Over a year ago

@Diodeus: this would reference the anchor element, but I do agree that changing the argument to something like "element" and passing in $('#i_15') (and changing the references appropriately) would probably be better.

Alex Morales Over a year ago

You still have to deal with the page refreshing if you use this code. I think you need to add something to keep that from happening.

Drew Gaynor Over a year ago

@Alex: Despite fragment identifiers causing history, they do not cause a page reload. See this article, item number 4. If the OP doesn't want this link to cause history, then he would indeed have to make a change to prevent that.

Alex Morales Over a year ago

Interesting, then what exactly does cause the page to refresh when you click on a link? I need to look into this a bit more. Thanks for the info.

|

derekaug · Accepted Answer · 2012-02-15 14:42:53Z

0

Something like this in your hi() function should work.

function hi(id, file){
    var $id = $(id);
    if($id.attr("src") == file)
    {
        $id.attr("src", $.data($id, "orig"));
    }
    else
    {
        $.data($id, "orig", $id.attr("src"));
        $id.attr("src", file);
    }
}

answered Feb 15, 2012 at 14:42

derekaug

2,1451 gold badge17 silver badges17 bronze badges

Collectives™ on Stack Overflow

jQuery 2nd click to call function

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related