javascript - 使用 jquery 一次只选择一行

Question

我正在使用 mouseover()、mouseout() 和 click() 在鼠标悬停时突出显示行并在单击时添加突出显示类:

    //Mouseover any row by adding class=mouseRow
    $(".mouseRow tr").mouseover(function() {
        $(this).addClass("ui-state-active");
    });
    $(".mouseRow tr").mouseout(function() {
        $(this).removeClass("ui-state-active");
    });
    $('.mouseRow tr').click(function(event) {
        $(this).toggleClass('selectRow'); 
    });

以上代码将允许用户“突出显示”(即添加类 selectRow)到他们想要的任意多行。使用 jQuery 将他们可以选择的行数限制为仅一行的最佳方法是什么(这样，如果他们单击一行，然后单击另一行，它将从先前选择的行)？

Answer 1

您可以从所有 tr 元素中移除 selectRow 类，只要您点击一个元素，除了被点击的元素，然后在被点击的元素上切换它:

$('.mouseRow tr').click(function(event) {
    $('.mouseRow tr').not(this).removeClass('selectRow');
    $(this).toggleClass('selectRow'); 
});

这是一个 working example .