Question

让我们说有这样的元素

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

我们可以看到上面的元素是display: none，我怎样才能让脚本看到这个元素。当该元素样式更改为display: block时，会触发一些代码。

非常感谢...

Answer 1

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

我创建了一个小的jQuery插件（是的，就在这里，现在），这是针对jQuery集创建的：

编辑此插件现在位于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');

Answer 2

您可以使用object.watch功能但非标准，已有跨浏览器实施Object.watch() for all browsers?

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

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

当你想开始观看时，只需写下：

startPolling();

Answer 4

我写了一个jQuery插件，用于观察DOM元素属性/属性和CSS属性的更改，有些人可能会发现更直观/更容易使用：jQuery.watch

为了在你做这样的事情之后完成你的目标：

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

该插件还支持在监视元素上跟踪jQuery方法的返回值，因此，当在给定元素上调用jQuery方法的返回值时，您可以触发回调。

Answer 5

由于你不能依赖DOM Mutation Events，因为在9之前不支持IE，我想你需要设置一个轮询计时器来观看。例如：

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

如果您想在更改后取消观看一次：

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 6

这是高度实验性的（你已经被警告了！）并且可能不适合你的问题或回答这个问题，但我发现你可以做两件事：

1 - 覆盖jQuery的核心.toggle方法，将一些数据添加到它应用的元素中。

2 - 将changeData事件处理程序绑定到元素，从jQuery 1.4.4开始

这意味着，只要元素被切换，你就可以发生一些事情。同样的原则可适用于.hide和.show方法，或任何其他方法。

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

在此处试试：http://jsfiddle.net/karim79/nreqv/1/

Answer 7

这可能被认为没有回答这个问题，但最好使用JQuery自定义事件和.trigger方法，而不是使用间隔和观看（只消耗资源）。

更重要的是，元素可以从他们“观察”的对象中订阅新的触发事件。

看看这里：

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

Answer 8

检查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已被弃用。 https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/watch 不要使用setInterval解决方案！

jQuery（event）：监视元素样式

8 个答案: