Question

我已经应用了mutationobserver来确定元素（.wq_singleResultWrapper）中包含的类，并因此将另一个类添加到其他元素中（#prizeentry）

我正在使用的代码本质上是一个“个性”测验，最后有4个结果。每个都在包装器（.wq_singleResultWrapper）中。

如果结果是第一个结果，则对jquery进行正确处理。但是，如果显示其他任何结果，则将不起作用。

var $div = document.getElementsByClassName(
    "wq_singleResultWrapper"
);

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.attributeName === "class") {
      var attributeValue = $(mutation.target).prop(mutation.attributeName);
      $('#prizeentry').addClass("visable");
    }
  });
});

observer.observe($div[0], {
  attributes: true
});

因此，以下是预期结果：：如您所见，包含在第二个div中的类将触发下面的div中的addClass（如前所述，只有在第一个div具有类包含。

<div class="wq_singleResultWrapper"></div>
<div class="wq_singleResultWrapper result"></div>
<div class="wq_singleResultWrapper"></div>
<div class="wq_singleResultWrapper"></div>
<div id="prizeentry" class="visable"></div>

请参阅以下示例 https://jsfiddle.net/2d8hb3n0/23/

我正在使用mutationobserver，因为我无法访问添加类包含的jQuery。

Answer 1

第一个结果有效是因为仅观察到$div[0]。 $ div包含所有结果，因此迭代$ div应该可以。

Array.from($div).forEach((div) => {
  observer.observe(div, {
    attributes: true, 
    subtree: true, 
    childList: true
  });
})

基于具有多个实例的同一个类上的突变来触发jQuery

1 个答案: