Question

我有一个像这样的图像列表：

<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>

等等。

我需要在点击时替换图片。所以我写了这个剧本：

$('.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);
    }

});

工作正常。但现在需要将之前点击的图像切换为正常。我怎么能这样做？

Answer 1

将其添加到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);
});

示例：

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

Answer 2

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');
    } 
});

使用替换的图像切换

2 个答案: