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

我怀疑是否有充分的理由删除现有的课程。如果你设置你的 CSS 以便在那些 for和.rowhover之后列出 的样式，它们自然会被覆盖。.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 回答