只使用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的最佳方法是将它们可以选择的行数限制为仅一个(这样如果他们单击一行,然后单击另一行,它将selectRow从先前选择的行中删除' '类)？

Answer 1

您可以selectRow从所有tr元素中删除该类,除非单击一个元素,只要您单击一个元素,然后在单击的元素上切换它:

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

这是一个有效的例子.