Question

这是代码，我甚至不确定为什么它的效果和它一样好，第7行甚至不是有效的我不认为，所以为什么它做我想做的事情（它降低了不透明度到灯箱的0并删除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();

工作正常......为什么？这是有效的代码，我找不到任何表明它的东西。

Answer 1

您需要使用回调函数。像这样：

$(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'); });

Answer 2

澄清为什么它适用于第7行（我更好地说“第7行会发生什么”）

$('a#loginDropdownBtn').click()末尾的

是return false。当此函数返回false时，它将阻止为文档触发click - 事件。

但是此函数不会返回false，因为lightBox()中发生的错误将阻止$('a#loginDropdownBtn').click()的进一步执行。

如果没有错误的第7行，如何获得相同的行为？移除return false末尾的$('a#loginDropdownBtn').click()。

如何在将DOM元素附加到同一函数中的元素之后将其销毁

2 个答案: