0

「foo」という名前のcssクラスがあるとしましょう。

2つのイベントハンドラーが必要です。-最初のイベントハンドラーは、「foo」がクラスとして任意のタグに追加されたときにトリガーされます。-2番目のイベントハンドラーは、「foo」がクラスとして任意のタグから削除されたときにトリガーされます。

どうすればこれを達成できますか？

前もって感謝します。

4

3 に答える 3

3

これを行うためのクロスブラウザイベントはありません。

クラスが常にコードによって追加/削除される場合は、.addClassラッパー関数を記述してそれを実行し、 /ではなくそれを使用し.removeClassます。

代わりに（そして私はこれを積極的に提案していません）、あなたはラップ.addClassして.removeClass：

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

...しかし、それは本当に邪魔です。

もちろん、これらの最後の提案はどちらも、クラスを追加/削除する唯一の方法がjQueryを介することを前提としています。

于 2012-06-21T16:03:54.603 に答える
1

この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();
                }
            });
        }
    };
    ​

jsfiddle.netでチェックしてください

于 2012-06-21T16:43:23.183 に答える
0

.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ます。

于 2012-06-21T16:03:23.743 に答える