2

モーダルウィンドウがあります。その中には、ID がWebPartWPQ2のテーブルがあり、3 つの異なる状態の 3 つの異なるクラスがあります。クラスはms-applyfiltersinactive、ms-applyfiltersactive、ms-applyfiltershoveroverです。最初に、モーダル ウィンドウがポップアップすると、テーブルにはms-applyfiltersinactiveクラスが含まれます。内部の選択ボックスのオプションを変更した場合にのみ、テーブルのクラスがms-applyfiltersactiveに変更され、マウスをホバーすると、クラスがms-applyfiltershoveroverに変更されます。ウィンドウを閉じると、テーブルのクラスはms-applyfiltersinactiveにリセットされます。

要件は、テーブルがアクティブなとき、つまりクラスms-applyfiltersactiveまたはms-applyfiltershoveroverがある場合にのみ、テーブルにクリック イベントを設定する必要があることです。

私は使っている

$(document).on("click","#WebPartWPQ2 .ms-applyfiltersactive, #WebPartWPQ2 .ms-applyfiltershoverover", function(){
    alert("Clicked");
});

これにより、クリック イベントをテーブルにアタッチできません。これは、テーブルのクラスがms-applyfiltersinactiveであるためである可能性があります。

次のコードを使用する場合

$(document).on("click","#WebPartWPQ2 table[class*='ms-applyfilter']", function(){
    alert("Clicked again");
});

イベントは 3 つのケースすべてで発生しますが、これは望ましくありません。

hasClassおよびisイベントを使用してセレクターを除外しようとしました。

$(document).on("click","#WebPartWPQ2 table[class*='ms-applyfilter']", function(){
    alert($(this).is("table.ms-applyfiltersactive"));
});

ただし、テーブルにクラスがある場合、これは同じブール値を返します。

これで私を助けてください。

4

1 に答える 1

0

HTMLがないと、現在のコードを使用できません。ただし、役立つはずの例を作成しました。

次のことをお勧めします。

JAVASCRIPT：

$(document).on("click","#WebPartWPQ2", function(){
    switch($("#WebPartWPQ2").attr("class")){
        case 'ms-applyfiltersinactive':
            //do something
            break;
        case 'ms-applyfiltersactive':
            //do something
            break;
        case 'ms-applyfiltershoverover':
            //do something
            break;    
    }
});

デモ：http：//jsfiddle.net/PKWKn/11/

お役に立てれば！

于 2012-12-27T16:36:13.060 に答える