Question

看看this小提琴。

这是最重要的标记：

$("div#images > img").click(function() {
    if ($(this).hasClass("active")) {
        $(this).fadeOut("fast").remove();    
        $("div#overlay").fadeOut("fast");
    }
    else {
        $(this).clone().addClass("active").appendTo("div#images");
        var marginL = -$("div#images > img.active").width() / 2;
        $("div#images > img.active").css("margin-left", marginL);

        $("div#overlay").fadeIn("fast");
    }
});

我想要什么

当用户点击图片时，jQuery应该克隆该图片并立即在灯箱式弹出窗口中打开它。（我不想为此使用插件。）这很好用。但是，我还希望当用户点击该克隆的图像时，图像被删除并且叠加层再次淡出。这根本不起作用。

有人有任何想法吗？

提前致谢。

Answer 1

由于对象是活动对象并且需要更改，您需要将.click函数更改为.live函数，如下所示：

$("div#images > img").click(function() {...

对此：

$("div#images > img").live('click',function() {...

这里是jsFidle：http://jsfiddle.net/7Wp9z/52/ 希望有所帮助

Answer 2

试试这个：

function hideClone() {
    $(this).fadeOut("fast").remove();
    $("#overlay").fadeOut("fast");
}

$("#images").on('click', 'img', function() {
    var $this = $(this),
        $div = $this.closest('div'),
        $clone = $this.clone(),
        marginL = $clone.width() / -2;
    $clone.addClass("active").css("margin-left", marginL).appendTo($div).on('click', hideClone);
    $("#overlay").fadeIn("fast");
});

<强> Updated fiddle

单击克隆对象上的函数

我想要什么

2 个答案: