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