MutationObserver Feuer nur beim ersten Wechsel

-1

Im folgenden Code, durch wiederholtes Klicken auf die 2-Tasten, die observer nur Feuer für die erste Änderung auf jedem beobachteten Ziel? (Der Ausgang zeigt die Änderung.)MutationObserver Feuer nur beim ersten Wechsel

Wie mache ich es bei jeder Änderung Feuer?

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> &nbsp;&nbsp;&nbsp; <span class="button nr2">BUTTON 2</span> 
 

 
<br><br>Output: <span class="result"></span>

Quelle

2016-03-23 LGSon

In Optionen benötigen Sie zwei Flaggen und Character subtree

observer.observe(inbox_counter, { attributes: true, childList: true,characterData:true, subtree:true }); 
    observer.observe(reps_counter, { attributes: true, childList: true,characterData:true , subtree:true });

Quelle

2016-03-23 14:13:28

, die den Trick zu tun scheint hinzuzufügen. Weißt du, warum all diese Optionen da sein müssen? – LGSon

@LGSon Ich denke, was passiert, ist ChildList: True erkennt nur Hinzufügen und Löschen von Knoten. Nach dem anschließenden Klick gibt es keinen Zusatz, nur eine Wertänderung ist erfolgt. so childList: true ist nutzlos und characterData: true muss da sein. Unterbaum: Wahr muss wahr sein, weil die Änderung an inneren Textknoten vor sich geht. –

Danke, +1, und es hört sich vernünftig an, da nach der ersten Änderung das Elternelement dasselbe wie das Ziel wurde, höchstwahrscheinlich weil der Text selbst als neuer Kindknoten behandelt wird. – LGSon

MutationObserver Feuer nur beim ersten Wechsel

Antwort

Verwandte Themen