当一个元素属性发生变化时，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()将不再寻求改变。