jquery - 使用 JQuery 向 TR 添加/删除边框

Question

请参阅以下 JSFiddle：JSFiddle 链接

我的查询：

$('.tr1').addClass('addBorder');
$('.tr2').removeClass('removeBorder');

$('#bName').click(function() {
    $('.tr1').addClass('addBorder');
    $('.tr2').addClass('removeBorder'); 
});
$('#bSpecialty').click(function() {
    $('.tr2').addClass('addBorder');
    $('.tr1').addClass('removeBorder'); 
});

假设使 BY NAME 行具有双蓝色边框，并且根据用户从单选按钮中的选择应该使该行具有蓝色边框并从未选中的行中删除边框。由于某种原因它不起作用。

我试过toggleClass();了，但这会删除现有的类，这将不起作用，因为用户应该能够多次单击同一个单选按钮并且类不应该改变。只有单击另一个单选按钮时，它才会更改。

Answer 1

您应该为表格单元格而不是行添加边框。此外，您不需要添加两个不同的类。相反，您可以只addClass添加边框和removeClass另一个。见演示：http: //jsfiddle.net/XZ5eg/

$(function () {
    var $rowName = $('.tr1 td');
    var $rowSpeciality = $('.tr2 td');

    $rowName.addClass('addBorder');
    $rowSpeciality.removeClass('removeBorder');

    $('#bName').click(function() {
        $rowName.addClass('addBorder');
        $rowSpeciality.removeClass('addBorder');    
    });
    $('#bSpecialty').click(function() {
        $rowSpeciality.addClass('addBorder');
        $rowName.removeClass('addBorder');  
    });

});

Answer 2

这不是你需要的：

$('.tr1 td').addClass('addBorder');
$('#bName,#bSpecialty').click(function () {
    $('td').toggleClass('removeBorder, addBorder ');
});

jsFiddle 示例

Answer 3

此外，您应该从表格单元格中删除类“removeBorder”，否则您将在该元素上同时拥有“addBorder”和“removeBorder”。

$('#bName').click(function() {
    $('.tr1 td').removeClass('removeBorder');
    $('.tr1 td').addClass('addBorder');
    $('.tr2 td').addClass('removeBorder');  
});
$('#bSpecialty').click(function() {
    $('.tr2 td').removeClass('removeBorder');
    $('.tr2 td').addClass('addBorder');
    $('.tr1 td').addClass('removeBorder');  
});