Disons avoir un élément comme celui-ci comme nous pouvons voir que l'élément ci-dessus style est Merci beaucoup ... affichage: Aucun , comment puis-je créer un script pour regarder cet élément. Lorsque ce style d'élément est modifié sur Affichage: Bloc Il y a un certain code déclenchera.
8 Réponses :
Depuis que vous ne pouvez pas compter sur le Événements de mutation DOM En raison d'aucun support pour IE avant 9, je pense vous serez tenu de définir une minuterie de vote à regarder. Par exemple: si vous souhaitez annuler la surveillance après avoir changé une fois:
startPolling();
Vous pouvez utiliser objet.watch fonctionne toutefois son Non standard, il existe déjà une implémentation entre navigateur croisée objet.watch () pour tous les navigateurs?
$('.watch-me').get(0).watch('style', handlerFunction);
+1 Mais avez-vous écrit celui-ci vous-même? :) Je suppose que Panache vaut toujours quelque chose.
Autant que je sache, la seule façon de le faire serait avec une minuterie.
J'ai créé un petit plug-in jquery (oui, ici, ici, en ce moment) qui le fait contre un ensemble JQuery:
edit Ce plugin est maintenant sur github: https: // github. com / jacobrelkin / jquery-watcher Utilisation: Pour effacer cet observateur de la propriété: < / p>
Et puis quel sera le code ici? // "ceci" dans cette lunette fera référence à l'objet sur lequel la propriété a changé
J'ai écrit un plugin associé pour surveiller les valeurs calculées de styles individuels (comme couleur, largeur, etc.) au lieu de l'attribut style sur l'ensemble. Peut-être d'aide: TECHFOOBAR.COM/JQUERY-STYLE-LISNER
Tu as sauvé mes cheveux! Comment puis-je passer une bière? :)
En réponse à @ user76061 Commentaire. Je ne sais pas si c'était un sarcasme, mais damnit! c'était cool. J'espère seulement que je peux un jour être cool dans ce domaine ... Parce que maintenant, je ne suis malheureusement pas.
Ceci est très expérimental (vous avez été prévenu!) Et pourrait ne pas être un bon ajustement à votre problème ou de répondre à cette question, mais cela m'a eu lieu que vous pouvez faire deux choses:
1 - remplacer le JQuery's Core 2 - Bind A Qu'est-ce que cela signifie, vous pouvez faire quelque chose d'arriver chaque fois qu'un élément est basculé. Le même principe pourrait s'appliquer au .TOGgle CODE> Méthode pour ajouter des données aux éléments qu'il est appliqué à. p> Modétata code> Mouvement d'événements aux éléments, à partir de JQuery 1.4.4 P> .hide code> et .Show code> méthodes ou toute autre méthode de cette matière. P> // 1 - override .toggle()
var original = jQuery.fn.toggle;
jQuery.fn.toggle = function() {
console.log("Override method: toggle()");
// call the original toggle
original.apply(this, arguments);
// record the element's visibility
$(this).data("visible", $(this).is(":visible"));
return this;
};
// 2 - bind a changeData event handler to a 'watch list'
$('div').bind("changeData", function() {
alert("Visibility changed to: " + $.data(this, 'visible'));
});
<!-- exhaustive test markup -->
<div id="test">Hello</div>
<div id="test2" style="display:none">Hello 2</div>
// go!
$(document).ready(function() {
$("#test").toggle();
$("#test2").toggle();
});
J'ai écrit un plugin JQuery pour regarder des modifications sur les propriétés des éléments DOM / Attributs et les propriétés CSS que certains pourraient trouver plus intuitives / plus faciles à utiliser: jquery.watch
Pour accomplir ce que vous pouvez faire quelque chose comme ceci: p>
$('.watch-me').watch({
'display': function( oldVal, newVal, elm ) {
if (newVal == 'block') {
// Do something
}
}
});
Ceci pourrait être considéré comme ne pas répondre à la question, mais il serait préférable d'utiliser des événements personnalisés JQuery et la méthode .Trigger que d'utiliser des intervalles et de regarder (qui consomme simplement des ressources).
Plus au point, les éléments peuvent abonner à de nouveaux événements déclenchés d'objets "regarder" ing.
Regardez ici:
check https://developer.mozilla.org/fr/docs/ Web / API / MUTATIONOBSERVER
var target = _DOM_;
var lastDisplayStyle = _DOM_.style.display;
var observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
if (mutation.type === "attributes") {
if (lastDisplayStyle !== _DOM_.style.display){
// your code there
}
}
});
});
var config = { attributes: true };
observer.observe(target, config);