Question

我有一个如下所示的列表：

<ul id="colors">
 <li class="variant on">red</li>
 <li class="variant off">blue</li>
 <li class="variant off">white</li>
 <li class="variant off">black</li>
</ul>

我希望在项目从关闭更改为更改时获取事件，例如如果发生以下情况：

 <li class="variant off">red</li>
 <li class="variant on">blue</li>

为此，我尝试使用livequery，但我没有设法获取事件或设置正确。

$('#colors li.on').livequery(function(){ 
                             console.log(this.text())
                          });

Answer 1

这只能在支持MutationObserver对象的现代浏览器中实现。否则您将无法直接观察DOM更改。您总是可以编写一些addClass函数的拦截器来自动引发事件，但我不建议这样做。你想要实现的是非常糟糕的设计。 您不应该依赖DOM来跟踪您的应用程序状态。

Answer 2

一种丑陋的方法是在运行jQuery的实现之前用你的一些中间函数修补jQuery函数。您可以在addClass和removeClass上运行中间代码。

例如，修补addClass。我们采用原始addClass

jQuery.fn.addClass = (function(){
  var addClass = jQuery.fn.addClass;
  return function(){
    //do stuff here before running the original addClass
    //you could collect callbacks and run them here
    return addClass.apply(this,arguments);
  }
}());

另一种方式是MutationObserver，目前只有Chrome，Firefox和Safari支持。

如何知道类何时更改/添加到HTML元素？

2 个答案: