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

然后我使用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:

我试过贾斯汀约翰逊的建议:

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