0

次の JSFiddle を参照してください: JSFiddle リンク

私の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();ましたが、既存のクラスが削除されます。ユーザーは同じラジオ ボタンを複数回クリックでき、クラスは変更されないため、機能しません。他のラジオボタンがクリックされた場合にのみ変更する必要があります。

4

3 に答える 3

1

行ではなく表のセルに境界線を追加する必要があります。また、2 つの異なるクラスを追加する必要はありません。代わりに、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');  
    });

});
于 2013-05-14T19:22:09.500 に答える
1

また、テーブル セルからクラス「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');  
});
于 2013-05-14T19:25:03.040 に答える
1

これはあなたが必要とするものではありません：

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

jsFiddle の例

于 2013-05-14T19:25:54.333 に答える