检查 Table tr 是否有类，然后在 Hover 事件中删除并添加新类

Question

我试图在鼠标悬停时突出显示表格行。每一行（tr）已经有一个“偶数”或“奇数”类。因此，要在鼠标悬停时突出显示该行，我需要先从该行中删除 CSS 类“偶数”或“奇数”。请多看我的剧本：

$('tr').hover(function() {

  if ($('this').hasClass('even')) {
    $(this).removeClass('even');
    $(this).addClass('rowhover');
  }

  else {
    $(this).removeClass('odd');
    $(this).addClass('rowhover');
  }
},
function() {
  $(this).removeClass('rowhover');
});

但是，它不起作用。你能指出我的错误吗？谢谢。

更新 1：

我用这个 toggleClass 喜欢这个

$("tr").hover(function() {
$(this).toggleClass("rowhover");
});

然后我用萤火虫检查元素，tr得到了这样的类：

<tr class="even rowhover"> where it should be <tr class="rowhover">

如果我这样使用，结果相同：

$('tr').hover(function() {

    $(this).addClass('rowhover');
    },
 function() {
    $(this).removeClass('rowhover');        
});

我的用于 rowhover 类的 CSS

.rowhover {background:green !important;} 

更新 2：

我尝试了贾斯汀约翰逊的建议：

$('tr').hover(function() {
    $(this).removeClass('even odd').addClass('rowhover');
        },
    function() {
     $(this).removeClass('rowhover').addClass(this.rowIndex % 2 == 0 ? "even" : "odd");
  });

我用 FireBug 检查了元素，结果如下：

//Notice the space in the class=" rowhover" when mouse hover
     <tr class=" rowhover">

 //Notice the space in the class=" even", class=" odd" when mouse out
 <tr class=" even"> or <tr class=" odd">

更新 3：它正在工作！

我关注了jQuery - Demonstrations and Examples of Tablesorter Plug-in 的帖子，但我需要添加 !important 来覆盖以前的样式，如下所示：

tr.overRow td { background-color:#FFFF99 !important; border :2px; }

我将该规则添加到 tablesorter 样式表的底部，然后使用以下脚本对其进行操作：

// Adds "over" class to rows on mouseover
$(".tablesorter tr").mouseover(function() { $(this).addClass("overRow"); });
// Removes "over" class from rows on mouseout
$(".tablesorter tr").mouseout(function() { $(this).removeClass("overRow"); }); 

现在，一切都按预期进行。谢谢大家的建议。很抱歉一开始没有提到我正在使用 jQuery tablesorter 插件，我只想突出显示悬停事件的行。

:D

Answer 1

改变

if ($('this').hasClass('even')) {

到

if ($(this).hasClass('even')) {

删除this 周围的引号。此外，您需要重置原始类状态并且您可以链接您的函数：

$('tr').hover(function() {
    $(this).removeClass('even odd').addClass('rowhover');
},
function() {
    $(this).removeClass('rowhover').addClass(this.rowIndex % 2 == 0 ? "even" : "odd");
});