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

Posted 2023-02-23

【中文标题】如何跟踪 DOM 元素的类属性更改并将其应用于某些元素

【英文标题】：How to track DOM element's class attribute changes and apply same on some element

【发布时间】：2018-10-26 19:35:38

【问题描述】：

我有一个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 也应该是可见的。

【参考方案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>

【讨论】：

无法控制库。

@Govinda - 上面第二段就是针对这种情况的，开头是 “如果你不能这样做......”

你知道任何其他方法可以做到这一点。 angularjs 方式？

@Govinda - 变异观察者部分是一样的。显示/隐藏部分将特定于您的确切 Angular 代码。 如果您无法弄清楚显示/隐藏部分，请发布一个带有minimal reproducible example 的问题，以展示该问题。

我试过你的解决方案，效果很好。但是测试用例失败了。 ***.com/questions/50398703/…