jquery image replace?

Question

when click on More Button the picture of More button and Featured will be changed and when you click agin on the More button the image should be the same as what it was the first, but it isn't.

$(document).ready(function(){

    $('#buy_now').hide(); 
    $('#more').click(function() {
        $("#more-btn").attr("src", "http://kilrush.mobi/kil/GetAssetFile?fileId=77470");
        $("#featur-btn").attr("src", "http://kilrush.mobi/kil/GetAssetFile?fileId=77472");
        $('#buy_now').toggle();              
    });      
});

Could you show us some html as well? It seems like you are changing the src attribute of the buttons instead of the image. — Marnix
– Marnix, Commented Nov 7, 2011 at 12:23
welcome to stackoverflow. Please present in a clear way what you are trying to do. -1 until you refomulate your problem. — Simon Bergot
– Simon Bergot, Commented Nov 7, 2011 at 12:23

user447356 · Accepted Answer · 2011-11-07 12:33:55Z

2

You need to store the original source then restore it. Best approach is using .toggle() for the button and .data to store the original source:

$(document).ready(function(){
    var btnMore = $("#more-btn");
    var btnFeature = $("#featur-btn");
    btnMore.data("org_src", btnMore.attr("src"));
    btnFeature.data("org_src", btnFeature.attr("src"));
    $('#buy_now').hide();
    $('#more').toggle(function() {
        btnMore.attr("src", "http://kilrush.mobi/kil/GetAssetFile?fileId=77470");
        btnFeature.attr("src", "http://kilrush.mobi/kil/GetAssetFile?fileId=77472");
        $('#buy_now').show();
    }, function() {
        btnMore.attr("src", btnMore.data("org_src"));
        btnFeature.attr("src", btnFeature.data("org_src"));
        $('#buy_now').hide();
    });
});

Live test case. (with cute cats :))

answered Nov 7, 2011 at 12:33

user447356

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

2 Comments

Ghost-Man Over a year ago

+1. Yes .toggle() is the key. You can also specify the original image source in the 2nd toggle function directly like the 1st one without storing the source by calling .data().

user447356 Over a year ago

Thanks @iTypist good point, but this still can be good example of using .data() plus it's more flexible this way e.g. if he want the original source elsewhere. :)

Collectives™ on Stack Overflow

jquery image replace?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related