javascript - 使用jQuery一次只能选择一行

我正在使用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将行可以选择的行数限制为仅一个的最佳方法是什么(因此，如果他们单击一行，然后单击另一行，则会从先前选择的行中删除“selectRow”类)？

最佳答案

您可以在每次单击一个selectRow元素之外的所有tr元素中删除ojit_code类，然后在单击的一个上将其切换:

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

这是working example。