javascript - 使用 jQuery 设置点击后的默认图像

Question

我希望在单击图像时看到新图像，单击后我希望新图像随默认图像一起更改，但我必须拖动鼠标才能看到默认图像，但我不这样做想要那个。

这是我的代码:

$(document).ready(function(){
    $(".img-button").live('click', function () {
           $(this).attr("src","images/pressed.svg");
    }); 
});

Answer 1

如果您只有一张图像，我建议您给它一个 ID，而不是(ab)使用类名。如果您有多个图像并为所有图像使用相同的图像，请将下面的 $("#myImage") 更改为 $(".img-button")

切换

$(document).ready(function(){
    $("#myImage").toggle(
     function() {
       $(this).attr('src','images/pressed.jpg');
     },
     function() {
       $(this).attr('src',"images/default.jpg");
    });
});

离开后交换

$(document).ready(function(){
    $('#myImage').on("click",function() {
       $(this).attr('src','images/pressed.jpg');
    });
    $('#myImage').on("mouseleave",function() {
       $(this).attr('src',"images/default.jpg");
    });
});

按下后半秒交换

$(document).ready(function(){
    $('#myImage').on("click",function() {
       $(this).attr('src','images/pressed.jpg');
       setTimeout(function() {
         $('#myImage').attr('src',"images/default.jpg");
       },500);
    });
});