jQuery中的类名更改事件

Question

有没有一种方法可以在jQuery中触发一个事件，当元素的类被改变时？

示例：

<img class="selected" />

转换为

<img class="selected newclass" />

触发一个事件

---

并且

<img class="selected" />

转化为

<img class="" />

触发事件。

- Andreas

---

当发生这种情况时，你想做什么？ - Nick Craver

Answer 1

你可能可以通过一种小技巧来解决问题。像下面这样使用 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 监听元素类更改感兴趣，您可以在添加或删除类时触发任何代码。当然，这仅适用于使用 jQuery 的情况。

当然，您也可以通过这种方式 hook 和 overwrite 任何 javascript 函数。

正如 Nick Craver 在评论中提到的那样，还有其他几个 jQuery 方法可以 add 或 remove 元素的类。您需要挂钩所有这些方法，即:

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

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

- jAndy

---

优雅，但要注意这里的其他方法，.toggleClass()、.attr('class')、.class =，有很多改变类的方法。我认为还有更简单的解决方案，但需要知道 OP 想要什么。此外，.addClass('alreadyHadThisClass') 和 .removeClass('DidNotHaveThis') 没有净效果，你也需要处理这个。 - Nick Craver

标记为已解决太快了，必须先检查它是否适用于所有情况。 - Andreas

@Andreas - 你实际上想做什么？ - Nick Craver

我得到了一个jQuery插件，但没有一个好的事件来显示它何时改变了某些东西。所以我想用这种方式来解决它。但如果我找到更好的解决方案，我会更仔细地检查并在这里发布 :) 我仍然将其标记为已解决，因为它回答了我的问题。 - Andreas

在jQuery中没有一个函数可以处理所有这些函数吗？将所有这些类函数收集到一个公共函数甚至是一个公共属性更改函数中会是一个聪明的做法。 - Andreas

另请参见：https://dev59.com/D2455IYBdhLWcg3wD_2Z - Quickredfox

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

希望这能给你一些帮助。

- RobertPitt