jQuery从div中插入和删除图像

Question

jQuery 有没有办法在点击时将图像插入到 div 中，并在点击时将其删除？

我正在尝试使用 jquery 制作一个灯箱，因此在 dom 准备就绪时，它将缩略图类应用于包装器 div 中的每个图像，然后单击它会切换整个类。但这会产生居中问题。所以我想要一个透明的 div 去 .5 不透明度并插入点击的图像，然后当你再次点击时，做相反的事情。

这是我目前的代码：

        $(document).ready
            $('img, div.wrapper').each( function() {
                var $img = $(this);
                $img.addClass('thumbnail');
                $img.click(function(){
                    $img.toggleClass('full');
                });
        });

链接到 js 小提琴： http://jsfiddle.net/reveries/TLJYN/

我只想添加一个宽度和高度为 100% 和 50% 不透明的 div，它将 text-align 设置为居中。这样当图像被注入到这个 div 中时，它会自动居中。然后当点击时，50% 不透明的父 div 会显示：none，并且图像会放回原来的位置。

Answer 1

这会将点击的图像克隆到 div 中。您可以根据需要更改 css 和其余部分

$(document).ready(function(){
    $('img, div.wrapper').each( function() {
        var $img = $(this);
        $img.addClass('thumbnail');
        $img.click(function() {
            $img.clone().appendTo('#big');
        $('#big').fadeToggle('slow');
    });

    $('#big').click(function(){
        $('#big').fadeOut('slow').html('');
    });

});

我还更改了一些 CSS。见Fiddle。