jQuery中的类名更改事件答案

【问题标题】：Class name change Event in jQueryjQuery中的类名更改事件
【发布时间】：2011-03-09 13:13:29
【问题描述】：

当元素类发生变化时，有没有办法在 jQuery 中触发事件？

示例：

<img class="selected" />

进入

<img class="selected newclass" />

触发事件

还有

<img class="selected" />

进入

<img class="" />

触发事件

【问题讨论】：

发生这种情况时你想做什么？

标签： jquery events triggers

【解决方案1】：

您也许可以通过一些 hacky 方式解决问题。 Hook .addClass() & .removeClass() 像这样：

var _addClass    = $.fn.addClass,
    _removeClass = $.fn.removeClass;

$.fn.addClass    = function(){
    // do whatever here
    return _addClass.apply(this, arguments);
}

$.fn.removeClass = function(){
    // do whatever here
    return _removeClass.apply(this, arguments);
}

这样，假设您只是对使用 jQuery 观察元素类更改感兴趣，您可以触发 adding 或 removing 类上的任何代码。同样，对于本示例，如果您使用的是 jQuery。

当然，您可以通过 hook 和 overwrite 使用任何 javascript 函数。

正如Nick Craver 在评论中提到的，还有其他几个可以add 或remove 元素类的jQuery 方法。你必须hook所有这些，即：

.addClass()
.removeClass()
.toggleClass()
.removeAttr('class')
.attr('class', 'changed')

除非您确切知道调用了哪些方法来操作一个类，否则您必须关心所有这些。

【讨论】：

优雅，但请注意这里的其他方法，.toggleClass()、.attr('class')、.class = ，有很多方法可以更改类。我在想有一个更简单的解决方案，但需要知道 OP 是什么。 .addClass('alreadyHadThisClass') 和 .removeClass('DidNotHaveThis') 也没有净效应，你也需要处理这个问题。
标记为快速解决，必须先检查它是否适用于所有情况。
@Andreas - 你到底想做什么？
嗯，我有一个 jQuery 插件，但当它改变某些东西时，没有一个好的事件可以显示。所以我想我会用这种方式修复它。但我会更仔细地检查是否有更好的解决方案，如果发现任何问题，我会在此处发布:) 我仍会将其标记为已解决，因为它回答了我的问题。
难道 jQuery 中没有一个函数可以让所有这些函数都通过吗？将所有这些类函数收集到一个通用函数，甚至是一个通用的 attr-changeing-function 函数是一件聪明的事情吗？

【解决方案2】：

我认为这是不可能的。

事件基于用户操作，因此单击、dblclick、鼠标悬停等都是用户操作。

您可能希望在每个元素上设计某种数据块，然后构建一个集成到 jQuery .class() 和 .attr() 方法中的小系统，这样当您的代码更新一个类时，它将向该元素添加数据上一课，

如果之前的类与设置的类不同，则触发你的事件。

我所说的整合是什么意思

var old_ClassFunc = $.fn.class; //Save it

var $.fn.class = function()
{
   if($(this).data('old-class'))
   {
      if($(this).data('class_callback'))#
      {
          $(this).data('class_callback')(this);
      }
   }
   $(this).data('old-class',$(this).attr('class')); //Update Data
   return old_class.apply(this,arguments);
}

那么你就可以这样做

$('element').data('class_callback',function(context){
   alert('Element class has changed');
})

希望能给你一些帮助

【讨论】：