Question

请参阅以下JSFiddle：JSFiddle Link

我的JQuery：

$('.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

此外，您应该从表格单元格中删除“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');  
});

Answer 3

这不是你需要的：

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

<强> jsFiddle example

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

3 个答案: