类别的MutationObserver(不适用于ID) [英] MutationObserver for class (not for id)
本文介绍了类别的MutationObserver(不适用于ID)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
使MutationObserver适用于 #someID
并不是问题,但是如何使其适用于 .someClass
?
It's not the problem to make MutationObserver work for #someID
, but what's the way to make it work for .someClass
?
当前我正在使用以下内容:
Currently I'm using the following:
// this example doensn't work,
// as well as many another attempts
var target = document.querySelectorAll(".someClass");
for (var i = 0; i < target.length; i++) {
// create an observer instance
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
var foo = target[i].getAttribute("someAttribute")
if (foo == "someValue")
foo.style.backgroundColor = "red";
});
});
// configuration of the observer
var config = { attributes: true };
// pass in the target node, as well as the observer options
observer.observe(target, config);
}
推荐答案
您遇到了一些问题:
- 迭代器:执行代码后,
target [i]
不是您所期望的(var foo = target [i] .getAttribute("someAttribute")
),由于运行此行时迭代已完成,因此i
的值为target.length
,因此target [i]
不存在 - 属性没有样式(
foo.style.backgroundColor
),您需要引用目标元素 - 您要将整个集合传递给观察者(
observer.observe(target,config);
),您只需要一个目标元素
- iterator:
target[i]
is not what you expect once the code is executed (var foo = target[i].getAttribute("someAttribute")
), since the iteration is finished when this line is ran,i
has a value oftarget.length
, sotarget[i]
does not exist - attributes don't have styles (
foo.style.backgroundColor
), you need to refer the target element - you're passing the whole collection to the observer (
observer.observe(target, config);
) you need only one target element
下面是修复上面列出的错误并将循环代码外部化为一个函数以便于目标引用之后的工作代码:
Here's the working code after fixing the errors listed above and externalizing the loop code into a function for easier target referencing:
var target = document.querySelectorAll(".c");
for (var i = 0; i < target.length; i++) {
create(target[i]);
}
function create(t) {
// create an observer instance
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
var foo = t.getAttribute("aaa")
if (foo == "vvv")
t.style.backgroundColor = "red";
});
});
// configuration of the observer
var config = {
attributes: true
};
// pass in the target node, as well as the observer options
observer.observe(t, config);
}
// let's change an attribute in a second
setTimeout(function(){
target[2].setAttribute('aaa', 'vvv');
}, 1000);
.c {
width: 50px;
height: 50px;
display: inline-block;
border: 1px solid black
}
<div class="c"></div>
<div class="c"></div>
<div class="c"></div>
<div class="c"></div>
这是一个最少编辑的示例:
Here's an example with minimal edits:
-
var foo = target [i] .getAttribute("someAttribute")
更改为var foo = variant.target.getAttribute("someAttribute")
而不是通过-目标元素中
var foo = target[i].getAttribute("someAttribute")
changed tovar foo = mutation.target.getAttribute("someAttribute")
instead of a passed-in target element
var target = document.querySelectorAll(".someClass");
for (var i = 0; i < target.length; i++) {
// create an observer instance
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
var foo = mutation.target.getAttribute("someAttribute")
if (foo == "someValue")
mutation.target.style.backgroundColor = "red";
});
});
// configuration of the observer
var config = { attributes: true };
// pass in the target node, as well as the observer options
observer.observe(target[i], config);
}
// let's change an attribute in a second
setTimeout(function(){
target[2].setAttribute('someAttribute', 'someValue');
}, 1000);
.someClass {
width: 50px;
height: 50px;
display: inline-block;
border: 1px solid black
}
<div class="someClass"></div>
<div class="someClass"></div>
<div class="someClass"></div>
<div class="someClass"></div>
这篇关于类别的MutationObserver(不适用于ID)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文