基于具有多个实例的相同 class 上的突变触发 jquery
Fire jquery based on mutation on same class with multiple instances
我已经应用 mutationobserver 来确定元素 (.wq_singleResultWrapper) 中的 class 包含,因此将另一个 class 添加到不同的元素 (#prizeentry)
我正在使用的代码本质上是一个 "personality" 测验,最后有 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 中包含 class 会触发下面的 addClass div(如前所述,这仅在第一个 div 包含 class 时有效。
<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,因为我无法访问添加 class 包含的 jquery。
第一个结果有效,因为只观察到 $div[0]
。 $div 包含所有结果,因此迭代 $div 应该有效。
Array.from($div).forEach((div) => {
observer.observe(div, {
attributes: true,
subtree: true,
childList: true
});
})
我已经应用 mutationobserver 来确定元素 (.wq_singleResultWrapper) 中的 class 包含,因此将另一个 class 添加到不同的元素 (#prizeentry)
我正在使用的代码本质上是一个 "personality" 测验,最后有 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 中包含 class 会触发下面的 addClass div(如前所述,这仅在第一个 div 包含 class 时有效。
<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,因为我无法访问添加 class 包含的 jquery。
第一个结果有效,因为只观察到 $div[0]
。 $div 包含所有结果,因此迭代 $div 应该有效。
Array.from($div).forEach((div) => {
observer.observe(div, {
attributes: true,
subtree: true,
childList: true
});
})