當一個元素屬性發生變化時，javascript回調函數

Question

我確定這裏已經存在，我找不到它。如果任何人都能指引我，那將是一個非常棒的方向。

我正在使用jQuery在網頁內部創建一個Tab系統。當查詢的響應完成後，它會將結果加載到新標籤中，並將其他標籤設置爲具有CSS style="display: none;"。大多數這是由jQueryUI處理。

我有一個函數，我試圖運行，如果這些選項卡的內容不可見，將引發錯誤。我正在尋找類似於document.ready()的標籤元素。這不完全是因爲該元素仍然被加載到DOM中，所以即使該項目被隱藏，$('#tab-content').ready()也會運行。有沒有辦法設置一個承諾或事件監聽器的回調，當一個元素隱藏屬性更改時運行？

我已經閱讀了下面關於$ .when和$ .this的文檔，但是我不確定我完全理解promise和deffer來正確實現這個。

http://api.jquery.com/jQuery.when/

http://api.jquery.com/ready/

http://api.jquery.com/deferred.then/

Answer 1

您可以使用Mutation Observers時看到一個元素已被更改。

在我下面的示例中，我創建了一個最初隱藏的段落。觀察者被設置爲這個元素，當改變時，將記錄"change!"。在底部，我讓可見的元素運行突變。

要檢查元素是否已變爲可見，您可以首先在mutations forEach循環內檢查mutation.type等於"attributes"。如果是，則可以檢查元素是否可見。

var testElement = document.getElementById('test-element'); 
 
    
 
var observer = new MutationObserver(function(mutations) { 
 
    mutations.forEach(function(mutation) { 
 
     console.log("change!"); // run some change when the style is mutated 
 
    });  
 
}); 
 
    
 
observer.observe(testElement, { 
 
    attributes: true 
 
}); 
 

 
testElement.style.display = "block"; // simulate a change

<p style="display: none;" id="test-element">Testing</p>

一旦你觀察完，你應該很明顯然後調用observer.disconnect()將不再尋求改變。