javascript - 更改功能内的图像 onclick

Question

我有这个功能显示左右移动的图像。有没有办法在 html 页面中创建一个按钮来更改其中一个图像？

比如，如果你点击“讲个笑话”happy.png 变成了laugh.png？

//fish moves on mouse hover
$(document).ready(function() {  
    $("#swim").mousemove(function (event) {//defines the swim area 
        var fish = $("#fish1");//defines the fish css styles
        var position = fish.position();
        var mousey = event.pageX;

        if (position.left > mousey) {
            $("#fish1").html("<img src='images/happy.png' />");//when swimming left, show left facing fish
        } else {
            $("#fish1").html("<img src='images/happyback.png'/>");//when swimming right, show right facing fish
        }

        $("#fish1").stop().animate({//animates the two images to show animated swimming
            left: event.pageX,
            top: event.pageY
        }, 300);
    });
}); 

Answer 1

像这样的东西应该工作

<button type="button" onclick="$('#fish1').prop('src','images/laugh.png');">tell a joke</button>