0

我正在尝试在单击时将 div 和 span 添加到图像中，然后在单击 span 时将其删除。

   <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 中，而只有图像被包裹，并且跨度仅在图像被包裹后附加。第二个问题是当我单击#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>')返回$(this)（这是图像），因此$(this).after('<span id="close">X Close</span>').wrap("<div id='pop-up' style='display:block'/>")将 div 包裹在图像周围然后返回$(this)，
$(this).after('<span id="close">X Close</span>').wrap("<div id='pop-up' style='display:block'/>").clone()返回 $(this) 的克隆

这可能会有所帮助

$(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 中的元素使用 wrap。您可以创建一个新元素作为您的包装器并将所有内容挂钩到该包装器，或者首先将您的 img 插入 dom 然后包装它。

在使用 X 添加跨度之前，您应该执行这两个选项中的任何一个，首先是最好的。

于 2012-07-03T05:41:57.800 回答