Как отследить изменения атрибута класса элемента DOM и применить то же самое к некоторому элементу

Question

У меня есть компонент angularjs, В компоненте у меня есть следующий HTML

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

Существует сторонняя библиотека javascript/jquery, у меня нет контроля над сторонней библиотекой, сторонняя библиотека удаляет класс hide-div из viewPort в некоторых событиях на стороне сервера.
hide-div класс скрывает элемент.

Теперь я должен удалить hide-div класс из panel, когда он удаляется из viewPort. Короче говоря, если viewPort скрыто, то панель должна быть скрыта, а если viewPort виден, то panel также должен быть виден.

Answer 1

Очевидно, если возможно, подключитесь к этой другой библиотеке, чтобы получить упреждающее уведомление от нее, когда она показывает / скрывает это деление.

Если вы не можете этого сделать, вы можете использовать мутацию Наблюдатель наблюдает за изменениями атрибутов элемента, а затем показывает / скрывает ваш другой элемент в зависимости от того, имеет ли этот элемент соответствующий класс.

Пример:

// 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 slave to it</div>

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