Question

我需要更好的方法来执行以下操作。 10行之后的性能会降低为无法使用。在100+时，浏览器就会锁定。

这是一个内部网ie8 enviro所以它必须在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键控它当前的类，所以现在使用类是临界强制性的，因为担心不得不重新编码网站的一半。

有什么建议吗？

Answer 1

我怀疑有一个很好的理由删除现有的课程。如果您设置了CSS，以便.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;
}

ie8斑马表行和悬停

1 个答案: