JavaScript/jQuery: Wie löst man ein Ereignis aus, wenn "display: none" entfernt wird?

Question

Ich entschuldige mich, wenn dies zuvor beantwortet wurde, konnte ich es nicht mit der Suche finden.

Ich muss 4 Elemente kennzeichnen, um ein Ereignis auszulösen, wenn sie eingeblendet werden ("display: none" wird entfernt). Ich denke, dass ein mutationObserver der richtige Weg ist, aber ich habe Probleme, genau auf das Ereignis zu filtern, das ich brauche.

Hat jemand Erfahrung damit?

Bearbeiten: Leider haben wir keinen Zugriff auf das Skript tatsächlich die Elemente zu verstecken. Sie sind Eigentum und werden von einem anderen Team geschützt. Das einzige was wir eingeben können ist, wenn das Element eingeblendet wird.

Ich habe versucht, herauszufinden, wie das für meine Bedürfnisse zu bearbeiten.

// Blocker is the element that has a changing display value 
var blocker = document.querySelector('#blocker'); 
// Trigger changes the display value of blocker 
var trigger = document.querySelector('#trigger'); 
// Our mutation observer, which we attach to blocker later 
var observer = new MutationObserver(function(mutations){ 
    mutations.forEach(function(mutation){ 
     // Was it the style attribute that changed? (Maybe a classname or other attribute change could do this too? You might want to remove the attribute condition) Is display set to 'none'? 
     if(mutation.attributeName === 'style' && window.getComputedStyle(blocker).getPropertyValue('display') !== 'none' 
     ){ 
      alert('#blocker\'s style just changed, and its display value is no longer \'none\''); 
     } 
    }); 
}); 

// Attach the mutation observer to blocker, and only when attribute values change 
observer.observe(blocker, { attributes: true }); 

// Make trigger change the style attribute of blocker 
trigger.addEventListener('click', function(){ 
    blocker.removeAttribute('style'); 
}, false); 

Answer 1

Hier gehen wir

var blocker = document.querySelector('#blocker'); 
var previousValue = blocker.style.display; 

var observer = new MutationObserver(function(mutations){ 
    mutations.forEach(function(mutation) { 
     if (mutation.attributeName !== 'style') return; 
     var currentValue = mutation.target.style.display; 
     if (currentValue !== previousValue) { 
      if (previousValue === "none" && currentValue !== "none") { 
      console.log("display none has just been removed!"); 
      } 

      previousValue = mutation.target.style.display; 
     } 
    }); 
}); 


observer.observe(blocker, { attributes: true }); 

Grundsätzlich wir den Standardwert im Stil-Attribute erhalten (falls vorhanden) - dies in previousValue gespeichert ist; Dann lassen wir den Code, aber wir machen einige Unterschiede in der Schleife. Zuerst prüfen wir, ob der Stil im Ziel geändert wurde. Dann erhalten wir den aktuellen Anzeigewert im Style-Attribut des Ziels. Der nächste Schritt besteht darin, diese Werte zu vergleichen. Wenn previousValue "none" ist und jetzt etwas anderes, bedeutet dies die Anzeige: none wurde nicht gesetzt. Sie müssen jedoch beachten, dass es nur auf diese spezifische Änderung hört. Wenn Sie nicht auf "keine" hören müssen, können Sie es weglassen.

Sie können es in Ihrem Code verwenden - ich habe nicht Ihren gesamten Code absichtlich geschrieben, so zögern Sie nicht, Ihren Event-Listener auf Ziel hinzuzufügen.

Answer 2

Leider bin ich nicht sicher, wie Sie display: none „Entfernen“, aber wenn Sie sind, durch Zufall, jQuery mit $.show Funktion, dann könnten Sie einen „Rückruf“ -Funktion angeben, welche würde aufgerufen werden, sobald die Show "Animation" beendet ist.

Hier ist ein Beispiel:

$(".myElement").show(400, function() { 
    // Do something... 
}); 

Noch einmal, ich bin nicht sicher, wie Sie ‚re display: none entfernen, so kann dies überhaupt nicht hilfreich sein.