Question

告诉我需要纠正的内容，重复点击其他单元格TR之前的事件已被删除

$('table tbody tr').each(function() {
    $('table tr:even').addClass('even');

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

    $(this).click(function(){
        $(this).closest('tr').toggleClass('visited');
    })

});

Answer 1

我猜你想要做的是删除以前的选择。 Here's a working fiddle

基本上，在这个例子中，我将从所有兄弟行中删除visited类：

$(this).siblings().removeClass('visited');

另外，有没有理由使用：

$(this).closest("tr").toggleClass('visited');

何时可以使用：

$(this).toggleClass('visited'); // $(this) is a <tr>

Answer 2

您可以通过向当前.click()处理程序添加一个位来执行此操作，如下所示：

$(this).click(function(){
  $(this).closest('tr').toggleClass('visited').siblings().removeClass('visited');
});

You can test it out here。但是，当您获得更多元素时，行级别处理程序的效率会降低，您应该查看.delegate()，如下所示：

$('table tr:even').addClass('even');
$('table tbody').delegate('tr', 'mouseenter', function() { 
    $(this).addClass("active");
}).delegate('tr', 'mouseleave', function() {
    $(this).removeClass("active");
}).delegate('tr', 'click', function(){
  $(this).closest('tr').toggleClass('visited').siblings().removeClass('visited');
});

You can test that version here，如果你不走这条路，至少要移动循环外$('table tr:even').addClass('even');，只需要运行一次：）

Answer 3

你可以减少你的jQuery，并缓存性能。

这是分支小提琴：http://jsfiddle.net/HTerC/

这是jQuery

$rows = $('table tbody tr');
$rows.click(function(){
    $(this).addClass('visited');
    $(this).siblings().removeClass('visited');
});

$rows.hover(function(){
    $(this).toggleClass('active');
});

您还希望将其包装在$(document).ready()

中

Answer 4

这个怎么样？

$('table tr:even').addClass('even');

$('table tr').hover(function() {
    $(this).toggleClass("active");
});

这将涵盖均匀突出显示和悬停。其他建议将适用于访问效果。

Answer 5

让你的JS更加简洁，我想我已经分类了你需要做的事情

$('table tbody tr').hover(function(){
    $(this).toggleClass("active");
}).click(function(){
    $(this).addClass( "visited" ).siblings( ).removeClass( "visited" );
}).filter( ":even" ).addClass('even');

所以你有悬停着色，点击访问，取消选择其他人，我不知道你是否要点击取消选择，如果你只是将addClass改回toggleClass。

如何删除以前的活动？

5 个答案: