更改功能内的图像 onclick答案

【问题标题】：Change image within a function onclick更改功能内的图像 onclick
【发布时间】：2013-02-05 01:11:08
【问题描述】：

我有这个功能可以显示左右移动的图像。有没有办法在 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);
    });
});

【问题讨论】：

我是否遗漏了什么，或者您只是不确定在 onclick 处理程序中操作 html 按钮图像的 jquery 构造？
我只是不确定如何使用按钮在现有函数中调用图像更改......我很可能是在想它。

标签： javascript image button onclick

【解决方案1】：

这样的东西应该可以工作

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

【讨论】：