0

このフィドルを見てください。

最も重要なマークアップは次のとおりです。

$("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はその画像のクローンを作成し、すぐにライトボックススタイルのポップアップで開きます。（これにはプラグインを使用したくありません。）これは正常に機能します。ただし、ユーザーがその複製された画像をクリックすると、その画像が削除され、オーバーレイが再びフェードアウトすることも必要です。これはまったく機能しません。

誰かが何か考えを持っていますか？

前もって感謝します。

4

2 に答える 2

1

オブジェクトはライブ オブジェクトであり、変更されるため、次のように .click 関数を .live 関数に変更する必要があります。

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

これに：

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

ここに jsFiddle があります : http://jsfiddle.net/7Wp9z/52/

于 2012-09-23T10:48:12.410 に答える
1

これを試して：

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");
});

更新されたフィドル

于 2012-09-23T11:20:19.263 に答える