Question

假设我有一个名为“foo”的css类。

我想有两个事件处理程序： - 当“foo”作为类添加到任何标记时，将触发第一个事件处理程序 - 当从任何标记中删除“foo”作为类时，将触发第二个事件处理程序

我怎样才能做到这一点？

提前谢谢。

Answer 1

没有跨浏览器事件。

如果代码总是添加/删除类，只需编写一个包装函数来执行它，然后使用它而不是.addClass / .removeClass。

或者（我并没有积极地建议这样做），你可以包裹.addClass和.removeClass：

var realAddClass = jQuery.fn.addClass;
jQuery.fn.addClass = function() {
    // Fire some event here
    return realAddClass.apply(this, arguments);
};

...但那真的侵入。

当然，这两个最后的建议都假设添加/删除类的唯一方法是通过jQuery。

Answer 2

This jsfiddle展示了我的发展方式

    // create a list of classes that you want to handle add and/or remove actions
    var classesThatIWantToFireAnEventFor = [
        {class: 'foo', add: false, remove: true },
        {class: 'bar', add: true, remove: true }
    ];

    // create the event handlers for each scenario
    var HandlesClassRemoved = function() {
        // implementation goes here
         alert('Running custom "removeClass" handler for css class .foo');
    };

    // create the event handlers for each scenario
    var HandlesClassAdded = function() {
        // implementation goes here
             alert('Running custom "addClass" handler for css class .foo');
    };

    var originalAddClass = jQuery.fn.addClass;
    var originalRemoveClass = jQuery.fn.removeClass;

    // override jquery's add class
    jQuery.fn.addClass = function(){
        // Execute the original method.
        originalAddClass.apply(this, arguments);

        // check in the arguments if the class you want to handle 'add' is added
        for(var i=0;i<=arguments.length;i++) {
            var c = arguments[i];
            $(classesThatIWantToFireAnEventFor).each(function() {
                if((this.class === c) && (this.add)) {
                // if it is and your list has a 'add' flag, call the handler method
                    HandlesClassAdded();
                }
            });
        }
    };

    // override jquery's add class
    jQuery.fn.removeClass = function(){
        // Execute the original method.
        originalRemoveClass.apply(this, arguments);

        // check in the arguments if the class you want to handle 'add' is added
        for(var i=0;i<=arguments.length;i++) {
            var c = arguments[i];
            $(classesThatIWantToFireAnEventFor).each(function() {
                if((this.class === c) && (this.remove)) {
                // if it is and your list has a 'add' flag, call the handler method
                    HandlesClassRemoved();
                }
            });
        }
    };

Check it out at jsfiddle.net

Answer 3

我认为您需要将委托事件处理程序添加到这些标记，因为在任何项目上切换类.foo将被视为动态元素。

$('#parent').on('click', '.foo', function() {
  alert('class is foo');
});

$('#parent').on('mouseover', ':not(.foo)', function() {
  alert('class is foo');
});

此处#parent是一个选择器，其中包含元素.foo或不包含.foo的元素。您可能有其他容器，需要更改它们。

下面。 :not(.foo)将应用于没有类.foo的所有元素，因此最好对这些元素使用其他class。

如何在向任何标记添加/删除某个类时附加事件？

3 个答案: