使用点击功能交换图像

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

好的迈克！

您似乎遇到的问题是点击侦听器没有查看 SAME 元素。当你交换它时，你基本上删除了元素并用一个新元素替换它，所以听众甚至找不到元素。要解决此问题，请尝试使用 $("#swap").one('click', 函数) 并将其嵌套在函数本身中。

像这样：

function fn(e) {
    ...
    $(selector).one('click', fn);
}

$(selector).one('click', fn);

Answer 2

您只需要 1 个点击处理程序，您可以在其中检查图像的当前 src 并像

一样交换源

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

演示：Fiddle

Answer 3

试试这个在 html

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

在 js 中

$("#swap").click(function(){
    var imgsrc =  $(this).attr('src');
    if(imgsrc  == 'image2.png'){
       $(this).attr('src', 'image1.png' );
    }else{
       $(this).attr('src', 'image2.png' );
    }
});

Answer 4

我更愿意使用的另一个选项。

$("#one").on("click", ".swap", function () {
  if ($(this).hasClass("swap-2"))
  {
    $(this).replaceWith('<img src="image2.png" class="swap swap-1" width="90" height="90">');
  }
  else {
    $(this).replaceWith('<img src="image1.png" class="swap swap-2" width="90" height="90">');
  }

});

Answer 5

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


    var index=1;
    var images=["image1.png", "image2.png"];
    $("#swap").click(function(){
        $(this).attr("src",images[index]);
        if(index == images.length-1){
            index=0;
    }
    else{
       index++;
    }   
   }

http://jsfiddle.net/ho7Lxkbf/1/

使用点击功能交换图像

Swapping images with click functions

html

javascript

jquery

image

click