jQuery 中的类名更改事件

Question

当元素类更改时，有没有办法在 jQuery 中触发事件？

示例：

<img class="selected" />

into

<img class="selected newclass" />

触发事件

---

And

<img class="selected" />

into

<img class="" />

触发事件

Answer 1

您也许可以通过一些技巧来解决。 钩子 .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，您可以在添加或删除类时触发任何代码。同样，如果您在本例中使用 jQuery。

当然，您可以通过这种方式挂钩和覆盖任何 JavaScript 函数。

正如 Nick Craver 在评论中提到的，还有其他几种 jQuery 方法可以添加或删除元素类。您必须hook所有这些，即：

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

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

Answer 2

我认为这是不可能的。

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

您可能希望在每个元素上设计某种数据块，然后构建一个集成到 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');
})

希望这能给你一些帮助