在下面的代码中,通过重复单击 2 个按钮,观察者
仅在每个观察到的目标上的第一个更改时触发? (输出显示更改。)
如何让它在每次更改时都生效?
var cc = 1;
document.querySelector('.button').addEventListener('click', function(e){
var target1 = document.querySelector('.icon-inbox .unread-count');
target1.innerHTML = ' inbox ' + cc++;
});
document.querySelector('.button.nr2').addEventListener('click', function(e){
var target2 = document.querySelector('.icon-achievements .unread-count');
target2.innerHTML = ' reps ' + cc++;
});
(function(title,inbox_counter,reps_counter,inbox_value,reps_value) {
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.type.toLowerCase() == 'attributes' && window.getComputedStyle(mutation.target,null).getPropertyValue("display") == 'none') {
if ((' ' + mutation.target.parentElement.className + ' ').indexOf(' icon-inbox ') > -1) {
inbox_value = '';
} else {
reps_value = '';
}
} else {
if ((' ' + mutation.target.parentElement.className + ' ').indexOf(' icon-inbox ') > -1) {
inbox_value = '(' + mutation.target.textContent + ') ';
} else {
reps_value = '(' + mutation.target.textContent + ') ';
}
}
document.querySelector('.result').innerHTML = inbox_value + reps_value + title;
});
});
observer.observe(inbox_counter, { attributes: true, childList: true, });
observer.observe(reps_counter, { attributes: true, childList: true, });
})(document.title,document.querySelector('.icon-inbox .unread-count'),document.querySelector('.icon-achievements .unread-count'),'','');
.button {
border: 1px solid;
}
div {
height: 24px;
}
<div class="topbar-icon icon-inbox"><span class="unread-count"></span></div>
<div class="topbar-icon icon-achievements"><span class="unread-count"></span></div>
<br><span class="button">BUTTON</span> <span class="button nr2">BUTTON 2</span>
<br><br>Output: <span class="result"></span>
最佳答案
在选项中,您需要添加两个标志字符数据和子树
observer.observe(inbox_counter, { attributes: true, childList: true,characterData:true, subtree:true });
observer.observe(reps_counter, { attributes: true, childList: true,characterData:true , subtree:true });
关于javascript - MutationObserver 仅在第一次更改时触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36180231/