jquery - 使用 jquery 隐藏和移动元素

Question

我知道如何使用 jquery 隐藏一个元素（在本例中为蓝色 div 中的图像），但单击时我也希望它重新出现在绿色 div 中（页面上的其他位置）。当它在绿色 div 中时，我点击它后甚至可能会回到蓝色 div。我怎样才能做到这一点？

演示

$(document).ready(function(){
  $("img").click(function(){
    $(this).hide();
  });
});

Answer 1

您可以使用事件委托来简化此操作：

$(document).ready(function(){
    $("#bottom-div").on("click","img",function(){
        $(this).appendTo("#top-div"); 
    });
    $("#top-div").on("click","img",function(){
        $(this).appendTo("#bottom-div"); 
    });
});

http://jsfiddle.net/cmfZX/4/

Answer 2

你需要的append不是hide.

JSFiddle：http: //jsfiddle.net/cmfZX/3/

尝试这个：

$(document).ready(function(){
  $("img").click(function(){
      if($(this).closest("#top-div").length > 0) {
          //Move to bottom Div
          $("#bottom-div").append(this);
      } else {
          $("#top-div").append(this);          
      }
    //$(this).hide();
  });
});

Answer 3

jsFiddle 演示

$(document).ready(function(){
    
  $("img").click(function(){
    var clonedImg = $(this).clone();
    $(this).hide();
    $('#top-div').append(clonedImg);     
  });
    
});

来自 jQuery 文档：

http://api.jquery.com/clone
http://api.jquery.com/append

Answer 4

做这样的事情：

$(document).ready(function(){
  $("img").click(function(){
    $(this).appendTo("#top-div");
  });
});