如何在將DOM元素附加到同一個函數中的元素後將其銷燬

這裏是代碼，我甚至不知道爲什麼它的效果和它的效果一樣，第7行甚至沒有效想想，爲什麼它做我想做的事情（它將不透明度降低到燈箱的0並刪除loginDropDown元素）？這讓我很困惑的是，爲什麼當我刪除第7行，第7行甚至不是有效時，它的功能不一樣？JQuery我只是偶然地鍵入了它，這是一個錯誤，如果是的話，我該如何得到它功能與有效的代碼一樣嗎？如何在將DOM元素附加到同一個函數中的元素後將其銷燬

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();

工作正常......爲什麼？這是有效的代碼，我找不到任何指示它的東西。

來源

2013-08-28 Ian

您需要使用回調函數。就像這樣：

$(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-28 21:09:51 htxryan

謝謝，我想到了這一點，並即將編輯我的文章，但它仍然不會刪除登錄元素只是lightBox元素（但它現在很好地動畫）。 – Ian

@Ian編輯我的答案。那是你需要的嗎？如果沒有，你能否在問題中增加更多細節？ – htxryan

這絕對有效，但我仍然很想知道爲什麼我的新代碼也可以工作。順便說一句，謝謝，我完全有這個臉掌時刻。 – Ian

解釋，爲什麼它的工作原理與線＃7 （我最好說「線7發生了什麼」）

在$('a#loginDropdownBtn').click()的末尾是return false。當這個函數返回false時，它將阻止click事件觸發文檔。

但是此功能不會返回false，因爲發生在lightBox()中的錯誤將會停止進一步執行$('a#loginDropdownBtn').click()。

如何在沒有錯誤的第7行的情況下獲得相同的行爲？在$('a#loginDropdownBtn').click()的末尾刪除return false。

來源

2013-08-28 21:33:43

啊，很好的解釋謝謝 - 不幸的是由於某種原因e.preventDefault（）;不工作（是的，我將e傳遞給函數處理程序）。我已經讀了一些關於在以前的代碼中清除或清空的內容，以某種方式破壞了e.preventDefault（）;但我無法弄清楚他們的意思。無論哪種方式，我得到它與返回假工作。 – Ian

如何在將DOM元素附加到同一個函數中的元素後將其銷燬

回答

相關問題