0

次のことを行うためのより良い方法が必要です。10 行を超えるとパフォーマンスが低下し、使用できなくなります。100+ では、ブラウザがロックアップします。

これはイントラネット ie8 環境であるため、ie8 で動作する必要があります。

$('table.vgrid tr.xodd').hover(
    function(){ 
        $(this).removeClass('xodd');
        $(this).addClass('rowhover');           
    } 
    , 
    function(){             
        if ($(this).attr("class")=='rowhover')
        {
            $(this).removeClass('rowhover');
            $(this).addClass('xodd');
        }
    }
);
$('table.vgrid tr.xeven').hover(
    function(){ 
        $(this).removeClass('xeven');
        $(this).addClass('rowhover');           
    } 
    , 
    function(){ 
        if ($(this).attr("class")=='rowhover')
        {
            $(this).removeClass('rowhover');
            $(this).addClass('xeven');
        }
    }
);

html は、テーブルの vgrid クラスと交互の tr 行の奇数/偶数で期待どおりです。

私はいくつかの異なる方法を試しましたが、それらはすべて恐ろしく機能します。ゼブラ効果だけでなく、他の JS が現在のクラスをキーオフしているため、サイトの半分を再コーディングする必要があることを恐れて、クラスを使用することが現在必須です。

助言がありますか？

4

1 に答える 1

1

既存のクラスを削除する正当な理由があるとは思えません。.rowhoverのスタイルが と のスタイルの後にリストされるように CSS を設定する.xevenと.xodd、自然にオーバーライドされます。

次に、必要な.toggleClassのはrowhoverクラスだけです。

$('.vgrid tr').on('mouseenter mouseleave', function() {
    $(this).toggleClass('rowhover');
});

http://jsfiddle.net/mblase75/JJ2qJ/1/

しかし、さらに優れたピュア CSS アプローチがあります。それは、疑似クラスを使用すること:hoverです。繰り返しますが、これら:hoverのスタイルを他のスタイルの.xeven後にリスト.xoddして、オーバーライドするようにします。

tr:hover td(特定のスタイルを、それ自体ではなく、子に適用する必要がある場合がありますtr。試してみて、何が最適かを確認してください。)

例: http://jsfiddle.net/mblase75/JJ2qJ/

.vgrid .xeven {
    background-color: #999;
}
.vgrid .xodd {
    background-color: #ddd;
}
.vgrid tr:hover {
    background-color: #9ff;
}
于 2013-03-04T16:37:05.290 に答える