javascript - 检查表 tr 是否有类，然后在悬停事件上删除并添加新类

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");
});

然后我用 Firebug 检查元素，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:

我尝试了 Justin Johnson 的建议:

$('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");
});