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 demo

$(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");
  });
});

使用jquery隐藏和移动元素

4 个答案:

jsFiddle demo