jQuery 在 div 中插入和删除图像

Question

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

我正在尝试用 jquery 制作一个灯箱，所以在 dom 准备好后，它将缩略图类应用于包装器 div 中的每个图像，然后单击它切换完整类。但这会产生居中问题。所以我想要一个透明的 div，它的不透明度为 0.5 并插入点击的图像，然后当您再次点击时，执行相反的操作。

这是我目前的代码:

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

链接到 js fiddle : http://jsfiddle.net/reveries/TLJYN/

我只想添加一个宽度和高度为 100% 和 50% 不透明的 div，并将文本对齐设置为居中。这样当图片被注入(inject)到这个div中时，它会自动居中。然后当点击时，50% 不透明的父 div 将显示:无并且图像将放回之前的位置。

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 .