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元素。当你交换它时，你基本上删除了元素并用一个新元素替换它，所以听众甚至找不到元素。要解决此问题，请尝试使用$（＆＃34;＃swap＆＃34;）。一个（＆＃39;点击＆＃39;，函数）并将其嵌套在函数内部。

这样的事情：

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/

使用单击功能交换图像

5 个答案: