Image toggle using replace

Question

I have a list of images like that:

<div class="prizes">
    <img src="img/prize1-normal.png" width="102" height="137">
</div> 

<div class="prizes">
    <img src="img/prize2-normal.png" width="102" height="137">
</div>

And so on.

I need to replace image when it clicks. So I wrote this script:

$('.prizes').on('click', function(){
    file = $(this).find('img').attr('src');
    if(file.indexOf('clicked') == -1){
        var src = $(this).find('img').attr("src").replace("-normal", "-clicked");
        $(this).find('img').attr("src", src);
    }

});

Works fine. But now a need to toggle the previous clicked image to normal. How can I do this?

"previous clicked", you mean image which has been clicked earlier? — Kasyx, Apr 26 '13 at 13:46
See: http://stackoverflow.com/questions/1062731/jquery-toggle-to-change-image — Luigi Siri, Apr 26 '13 at 13:50

Pete · Accepted Answer · 2013-04-26T13:54:09.843

0

add it to the else:

$('.prizes').on('click', function(){
    var file = $(this).find('img').attr('src');

    var src = (file.indexOf('clicked') == -1) ? file.replace("-normal", "-clicked") : file.replace("-clicked", "-normal");

    $(this).find('img').attr("src", src);
});

example:

http://fiddle.jshell.net/KR2s8/

edited Apr 26 '13 at 13:54

answered Apr 26 '13 at 13:47

Pete

57,112
28
117
166

Pete, when I click in one item, the other, if was clicked, must to turn into normal. – Apr 26 '13 at 13:56
1

@marcelo2605 ah ok that was never stated. Try this: http://fiddle.jshell.net/KR2s8/5/ – Pete Apr 26 '13 at 14:09
Thanks Pete! Works fine now. – Apr 26 '13 at 14:15

score 0 · Answer 2 · answered Apr 26 '13 at 14:02

css

 .imag1{ background:url("../img/prize1-normal.png") no-repeat;width:102px; height:137px;}
 .imag2{ background:url("../img/prize2-normal.png") no-repeat;width:102px; height:137px;}


 var count=1;
 $(".prizes").live('click', function() {
    if(opacity==1){                       
$(".prizes").removeClass('imag2');
$(".prizes").addClass('imag1')
 count=2;
    }

    else{
count=1;    
$(".prizes").removeClass('imag1');
    $(".prizes").addClass('imag2');
    } 
});

Image toggle using replace

2 Answers2