0

クリック時に画像にdivとスパンを追加し、スパンクリックで削除しようとしています。

   <div id="gallery" align="center">    

        <img  src="http://www.frontpagejunky.com/wp-content/uploads/2011/05.jpg" class="img-view" width="150px" height="150px" />
</div>

jquery:

           $(document).ready(function(){
              $('.img-view').click(function(){
                  var img=$(this).after('<span id="close">X Close</span>').wrap("<div id='pop-up' style='display:block'/>").clone();
                  $('#gallery').append(img);
              });

             $('#close').live("click",function(){
                 $('#pop-up').remove();
                  $('#close').remove();

             });

       });
    </script>

私が抱えている問題は、スパンが div にラップされず、画像のみがラップされ、スパンは画像がラップされた後にのみ追加されることです。2 番目の問題は、 #close をクリックすると div とボタンが消えますが、 .img-view をもう一度クリックすると、再生成/再表示されません。なぜそれが起こるのですか？

アップデート

        $(document).ready(function(){
              $('.img-view').click(function(){
                  var img=$(this).clone();
                   img= img.after('<span class="close">X Close</span>');
                   img=img.wrap("<div class='pop-up' style='display:block'/>"); 
                  $('#gallery').append(img);
              });

             $('.close').live("click",function(){
                 $('.pop-up').remove();
                  $('.close').remove();

             });

       });

しかし今、ポップアップ div は画像要素をラップしません!?!

4

3 に答える 3

1

これを使用してください：

$('#gallery').append(img);

それ以外の：

$('#gallery').append($(img));
于 2012-07-03T05:03:06.467 に答える
1

あなたのチェーンは少しずれており、 (画像である) を
$(this).after('<span id="close">X Close</span>')返すので、画像の周りに div をラップし、次に$(this) のクローンを返します$(this)$(this).after('<span id="close">X Close</span>').wrap("<div id='pop-up' style='display:block'/>")$(this)
$(this).after('<span id="close">X Close</span>').wrap("<div id='pop-up' style='display:block'/>").clone()

これは役立つかもしれません

$(document).ready(function(){
    $('.img-view').on('click', function(e){
        $("<div id='pop-up' style='display:block'/>").appendTo('#gallery').append('<span id="close">X Close</span>').find('#close').append(this);           
        event.stopPropagation();
    });
    $('#close').live("click",function(){
        $(this).find('.img-view').appendTo('#gallery');
        $(this).parent().remove();
    });
});

編集

これが機能しなかった理由は、#close のクリック ハンドラーが .img-view の親になってから呼び出されていたためです。これを防ぐためにstopPropagation()、テキストX Closeが削除されるようにコードを変更しました。

フィドル

于 2012-07-03T05:32:17.427 に答える
1

DOM にない要素にはラップを使用できません。ラッパーとなる新しい要素を作成してすべてをそのラッパーにフックするか、最初に img を dom に挿入してからラップすることができます。

X でスパンを追加する前に、これら 2 つのオプションのいずれかを実行する必要があります。

于 2012-07-03T05:41:57.800 に答える