2

ここにコードがあります。なぜそれがうまく機能するのかさえわかりません.7行目は有効ではないと思います.ライトボックスを削除し、loginDropDown 要素を削除します)? 私を本当に混乱させているのは、7行目を削除しても同じように機能しないのはなぜですか.7行目が有効なJQueryでさえないのに、偶然に入力したのですが、これはバグですか？有効なコードと同じように機能しますか?

function lightBox($this) {
    if (!$('#lightBox').length > 0) {
        $('<div id="lightBox"></div>').prependTo($this);
        $("#lightBox").animate({opacity: '.4'}, 500);
    } else {
        $("#lightBox").animate({opacity: '0'}, 500);
        $('<div id="lightBox"></div>').delete();
    }
}


/** login dropdown **/
$('a#loginDropdownBtn').click(function () {
    $this = $(this);
    if ($(this).hasClass('loginActive')) {
        $('div#loginDropdown').removeClass('loginActive');
    } else {
        $('div#loginDropdown').addClass('loginActive');
        lightBox($this);
    }
    return false;
});

/** login removal **/
$(document).click(function (event) {
    if ($(event.target).parents().index($('#loginDropdown')) == -1) {
        if ($('#loginDropdown').is(":visible")) {
            $('div#loginDropdown').removeClass('loginActive');
        }
    }
})

編集：私が使用する場合-

        $('div#loginDropdown').removeClass('loginActive');
        $("#lightBox").animate({opacity: '0'}, 500, function() {
            $(this).remove();            
        });

動作します！でも -

        $("#lightBox").animate({opacity: '0'}, 500, function() {
            $(this).remove();            
        });
        $('<div id="lightBox"></div>').delete();

正常に動作します...なぜですか？これは有効なコードですか?有効であることを示すものは見つかりません。

4

2 に答える 2

2

コールバック関数を使用する必要があります。このような：

$(document).ready(function () {
    $("#clickMe").click(function () {
        $("#lightBox").animate({opacity: '0'}, 500, function(){$(this).remove()});
    });
});

フィドル: http://jsfiddle.net/vpbKe/

編集

ログインドロップダウンも削除するようにコードを変更しました。

$("#lightBox").animate({opacity: '0'}, 500, function(){
    $(this).remove();
    $('div#loginDropdown').removeClass('loginActive');
});
于 2013-08-28T21:09:51.140 に答える
1

7行目でなぜ機能するのかを明確にするために（「7行目で何が起こるか」と言ったほうがいいでしょう）

の最後に$('a#loginDropdownBtn').click()はreturn false. この関数が を返すと、ドキュメントに対して -eventfalseが発生するのを防ぎます。click

しかし、この関数は を返しませんfalse。なぜなら、 で発生したエラーがlightBox()のさらなる実行を停止するから$('a#loginDropdownBtn').click()です。

障害のある行 7 なしで同じ動作を取得するにはどうすればよいですか? return falseの末尾の を削除し$('a#loginDropdownBtn').click()ます。

于 2013-08-28T21:33:43.780 に答える