jQuery(event): regardez l'élément de style

disons avons élément comme ce

<div class="watch-me" style="display: none;">Watch Me Please</div>

comme nous pouvons le voir, l'élément au-dessus de style est display: none, comment puis-je faire un script pour regarder cet élément. lors de cet élément de style est le changement de display: block puis il y a un peu de code sera le déclencheur.

merci beaucoup...

InformationsquelleAutor GusDeCooL | 2010-12-31

Autant que je sache, la seule façon de le faire est avec une minuterie.

J'ai créé un petit plugin jQuery (oui, ici, maintenant) qu'est-ce à l'encontre d'un jQuery ensemble:

MODIFIER ce plugin est maintenant sur GitHub: https://github.com/jacobrelkin/jquery-watcher

$.fn.watch = function(property, callback) {
   return $(this).each(function() {
       var self = this;
       var old_property_val = this[property];
       var timer;

       function watch() {
          if($(self).data(property + '-watch-abort') == true) {
             timer = clearInterval(timer);
             $(self).data(property + '-watch-abort', null);
             return;
          }

          if(self[property] != old_property_val) {
             old_property_val = self[property];
             callback.call(self);
          }
       }
       timer = setInterval(watch, 700);
   });
};

$.fn.unwatch = function(property) {
   return $(this).each(function() {
       $(this).data(property + '-watch-abort', true);
   });
};

Utilisation:

$('.watch-me').watch('style', function() {
   //"this" in this scope will reference the object on which the property changed
   if($(this).css('display') == 'block') { 
       //do something...
   }
});

Pour effacer cette propriété watcher:

$('.watch-me').unwatch('style');

et puis ce sera le code ici? //"this" in this scope will reference the object on which the property changed
J'ai écrit un related plugin pour surveiller les valeurs calculées de styles individuels (comme la couleur, la largeur, etc.) au lieu de la style attribut sur l'ensemble. Peut-être de les aider: techfoobar.com/jquery-style-listener
Vous avez sauvé mes cheveux ! comment puis-je passer une de la bière ? 🙂
en réponse à @user76061 commentaire. Je ne sais pas si c'était le sarcasme, mais merde! c'était cool. J'espère seulement que je puisse un jour être cool dans ce domaine...parce que maintenant, malheureusement, je ne suis pas.

InformationsquelleAutor Jacob Relkin

9

Vous pouvez utiliser objet.regarder fonction, cependant sa non standard, il y a déjà un cross-browser mise en œuvre Objet.watch() pour tous les navigateurs?
```
$('.watch-me').get(0).watch('style', handlerFunction);
```
- +1, mais avez-vous écrit ce un vous-même? 🙂 Je suppose que le panache vaut encore quelque chose.
InformationsquelleAutor Amjad Masad

function startPolling()
{
    var handle = window.setInterval(function(){

        var element = $(".watch-me");
        if (element.css("display") == "block") {
            //trigger the event
            window.clearInterval(handle);
        }

    }, 100);
}

Lorsque vous souhaitez commencer à regarder tout simplement écrire:

startPolling();

InformationsquelleAutor Roman

2

J'ai écrit un plugin jQuery pour observer les changements sur les DOM des propriétés des éléments/attributs et les propriétés CSS que certains pourraient trouver plus intuitives et faciles à utiliser: jQuery.regarder

Afin d'accomplir ce que vous êtes après, vous faites quelque chose comme cela:
```
$('.watch-me').watch({
    'display': function( oldVal, newVal, elm ) {
        if (newVal == 'block') {
            //Do something
        }
    }
});
```
Le plugin prend également en charge le suivi de l'valeurs de retour des méthodes jQuery sur regardé éléments, de sorte que vous pourrait, par exemple, l'incendie d'un rappel automatique lorsque la valeur de retour d'une méthode jQuery changements lorsqu'elle est appelée sur un élément donné.

InformationsquelleAutor Xaxis

Puisque vous ne pouvez pas compter sur les DOM Mutation Événements en raison de l'absence de soutien pour IE avant le 9, je pense vous serez tenue de fixer un bureau de vote de la minuterie à regarder. Par exemple:

var watched = $('.watch-me');
var lastDisplay = watched.css('display');

//Peek at the property about twice per second
setInterval(function(){
  var curDisplay = watched.css('display');
  if (curDisplay!=lastDisplay){
    //Do what you want here.
    lastDisplay = curDisplay;
  }
},500);

Si vous souhaitez annuler le regarder après il change une fois:

var watched = $('.watch-me');
var lastDisplay = watched.css('display');
var timer = setInterval(function(){
  if (watched.css('display')!=lastDisplay){
    //Do what you want here.
    clearInterval( timer );
  }
},500);

InformationsquelleAutor Phrogz

C'est très expérimental (vous êtes prévenus!) et peut-être pas un bon ajustement à votre problème ou de répondre à cette question, mais il a eu pour moi que vous pouvez faire deux choses:

1 - Remplacer le jQuery de base de .toggle méthode pour ajouter des données pour les éléments qu'il est appliqué à.

2 - Lier un changeData gestionnaire d'événement pour les éléments de jQuery 1.4.4

Ce que cela signifie, vous pouvez faire quelque chose chaque fois qu'un élément est activé. Le même principe pourrait s'appliquer à la .hide et .show méthodes, ou de toute autre méthode pour cette question.

//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();
});

Essayer ici: http://jsfiddle.net/karim79/nreqv/1/

InformationsquelleAutor karim79

0

Cela pourrait être considéré comme ne répondant pas à la question, mais il serait préférable d'utiliser JQuery des événements personnalisés et les .déclenchement de la méthode que d'utiliser des intervalles et de l'observation (qui vient consomme des ressources).

Plus au point, les éléments peuvent souscrire à de nouveaux événements déclenchés à partir d'objets qu'elles sont "regardez"ing.

Prendre un coup d'oeil ici:

http://www.sitepoint.com/jquery-custom-events/

InformationsquelleAutor Paul B. Hartzog

vérifier https://developer.mozilla.org/en/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);

P. S.
watch /unwatch sont obsolètes.
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/watch
Ne pas utiliser setInterval solutions!

InformationsquelleAutor Konstantin Eletskiy

Vous devez vous connecter pour publier un commentaire.