jQuery (événement): style élément regarder

Question

laisser dire ont élément comme celui-ci

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

que nous pouvons voir l'élément au-dessus de style est display: none, comment puis-je faire script pour regarder cet élément. quand ce style d'élément est changé en display: block alors il y a du code qui sera déclenché.

merci beaucoup ...

Answer 1

Pour autant que je sache, la seule façon de le faire serait d'une minuterie.

J'ai créé un petit plugin jQuery (oui, ici, en ce moment) qui fait cela contre un ensemble jQuery:

EDIT 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 cet observateur de la propriété:

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

Answer 2

Puisque vous ne pouvez pas compter sur la DOM Mutation Events en raison de pas de support pour IE avant le 9, je pense que vous demandera de régler une minuterie de vote à 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 voulez annuler l'observation après qu'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); 

Answer 3

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 voulez commencer à regarder simplement écrire:

startPolling(); 

Answer 4

Vous pouvez utiliser object.watch fonction cependant son non standard, il y a déjà une implémentation cross-navigateur Object.watch() for all browsers?

$('.watch-me').get(0).watch('style', handlerFunction); 

Answer 5

Ceci est très expérimental (vous êtes prévenus!) Et pourrait ne pas être un bon moyen de me votre problème ou de répondre à cette question, mais il est apparu que vous pouvez faire deux choses:

1 - Substituez la méthode .toggle principale de jQuery pour ajouter des données aux éléments auxquels elle est appliquée.

2 - liez un gestionnaire d'événements changeData aux éléments, comme de jQuery 1.4.4

Cela signifie, vous pouvez faire quelque chose se produire chaque fois qu'un élément se basculée. Le même principe pourrait s'appliquer aux méthodes .hide et .show, ou à toute autre méthode d'ailleurs.

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

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

Answer 6

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

Pour accomplir ce que vous cherchez, vous devriez faire quelque chose comme ceci:

$('.watch-me').watch({ 
    'display': function(oldVal, newVal, elm) { 
     if (newVal == 'block') { 
      // Do something 
     } 
    } 
}); 

Le plugin supporte aussi suivi des valeurs de retour des méthodes jQuery sur les éléments surveillés, vous pouvez par exemple déclencher un rappel lorsque la valeur de retour d'une méthode jQuery change lorsqu'elle est appelée sur un élément donné.

Answer 7

Ceci pourrait être considéré comme ne répondant pas à la question, mais il serait préférable d'utiliser les événements personnalisés JQuery et la méthode .trigger plutôt que d'utiliser des intervalles et de regarder (qui consomme juste des ressources). Plus précisément, les éléments peuvent s'abonner à de nouveaux événements déclenchés à partir d'objets qu'ils «surveillent».

Jetez un coup d'oeil ici:

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

Answer 8

check 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); 

post-scriptum watch/unwatch sont obsolètes. Ne pas utiliser les solutions setInterval!