jQuery(event):监视元素样式

2022-01-15 00:00:00 event-handling jquery javascript

假设有这样的元素

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

我们可以看到上面的元素样式是display: none，我如何制作脚本来观看这个元素.当该元素样式更改为 display: block 时会触发一些代码.

as we can see the element above style is display: none, how can i make script to watch this element. when that element style is change to display: block then there is some code will be trigger.

非常感谢...

推荐答案

据我所知，唯一的方法就是使用计时器.

As far as I know, the only way to do this would be with a timer.

我创建了一个小型 jQuery 插件(是的，就在这里，现在)，它针对 jQuery 集执行此操作:

I created a small jQuery plugin (yes, right here, right now) that does this against a jQuery set:

EDIT 这个插件现在在 GitHub 上:https://github.com/jacobrelkin/jquery-watcher

EDIT this plugin is now on 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);
   });
};

用法:

$('.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...
   }
});

要清除此属性观察器:

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

相关文章