javascript - 使用点击功能交换图像

Question

我正在使用 JQuery 和 HTML 开发移动应用程序。我希望能够通过点击功能交换图像。这就是我迄今为止所取得的成功

HTML:

<table align="center" width="50%">
   <tr>
       <td align="center" id="one"><img src="image1.png" id="swap" width="90" height="90" />
            <img src="" id="" width="90" height="90" />
       </td>
   <tr>
</table>

代码:

$("#swap").click(function(){
    $(this).replaceWith('<img src="image2.png" id="swap" width="90" height="90" />')
        $("#swap").click(function(){
        {
            $(this.).replaceWith('<img src="image1.png" id="swap" width="90" height="90" />')
        }
}

此设置的唯一问题是它仅交换图像的次数与嵌套的次数相同。我希望能够无限期地交换它们。我尝试过在这个网站上找到的 CSS 方法，成功地进行了交换，但图像偏离了一侧并且具有白色背景。我还尝试用图像制作复选框，取得了一些成功，但过程中出现了其他问题。这是我发现的唯一一种半成功的方法，可以利用我所发现的知识和我目前的知识来做到这一点。

感谢任何帮助。

迈克

Answer 1

您只需单击一次处理程序，即可检查图像的当前 src 并交换源，例如

$("#swap").click(function () {
    $(this).attr('src', this.src.indexOf('image2.png') > -1 ? 'image1.png': 'image2.png')
})

演示:Fiddle