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/

我只想添加一个div，宽度和高度分别为100％和50％不透明，将text-align设置为center。这样当图像注入此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。

jQuery插入和删除div中的图像

1 个答案: