元素属性改变时的javascript回调函数

Question

我确信这已经在这里的某个地方了，我只是找不到它。如果有人能指出我正确的方向，那就太好了。

我正在使用 jQuery 在网页内创建选项卡系统。当查询响应完成后，它将在新选项卡中加载结果，并将其他选项卡设置为具有 CSS style="display: none;"。其中大部分由 jQueryUI 处理。

我有一个正在尝试运行的函数，如果这些选项卡的内容不可见，它将引发错误。我正在寻找类似于 document.ready() 的选项卡元素。这并不完全是这样，因为该元素仍然加载到 DOM 中，因此即使该项目被隐藏，$('#tab-content').ready() 也会运行。有没有办法设置一个 promise 或事件监听器，并在元素隐藏属性更改时运行回调？

我已阅读以下有关 $.when 和 $.this 的文档，但是我不确定我是否完全理解 Promise 并延迟正确实现它。

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()将不再寻找更改。