如何跟踪 DOM 元素的类属性更改并将其应用于某些元素

Question

我有一个angularjs 组件，在该组件中我关注HTML

<div id="panel" class="hide-div">
  <div id="viewPort" class="hide-div">
     ...
  </div>
</div>

有一个第三方javascript/jquery 库，我无法控制第三方库，第三方库在某些服务器端事件中从viewPort 中删除了hide-div 类。
@ 987654327@ 类隐藏元素。

现在我的要求是删除 hide-div 来自panel 的类，当它从viewPort 中删除时。简而言之，如果viewPort 被隐藏，那么面板应该被隐藏，如果viewPort 是可见的，那么panel 也应该是可见的。

Answer 1

如果可能，连接到其他库，以便在它显示/隐藏该 div 时从它获取主动通知。

如果您不能这样做，您可以使用mutation observer 来观察元素属性的变化，然后根据该元素是否具有相关类来显示/隐藏您的其他元素。

例子：

// Your code
var observer = new MutationObserver(function() {
    var source = $("#source");
    var target = $("#target");
    target.toggleClass("hide-div", source.hasClass("hide-div"));
});
observer.observe($("#source")[0], {attributes: true});

// This code emulates the library that you don't control
var handle = setInterval(function() {
  $("#source").toggleClass("hide-div");
}, 800);
$("#btn-stop").on("click", function() {
  clearInterval(handle);
});

.hide-div {
  display: none;
}

<button id="btn-stop">Stop</button>

<div id="source">This is the source element that the library changes</div>
<div id="target">This is the target element that we update when the source element changes</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>