jQueryを使用してボタングループの1つのボタンにクラスを追加する方法は？

Question

私は、各行にボタングループを持つHTMLテーブルを持っています。ユーザーがボタンを選択すると、そのボタンをハイライトしたいが、他のボタンはハイライトしたくない。私はこれを行うためにクラスを使用しようとしています。しかし、他の2つのボタンからこのクラスを削除するにはどうしたらいいですか？ここで

.selectedAnswer { 
    font-weight: bold; 
    border: 1px solid blue; 
} 

<table> 
    <tr> 
    <td> 
     Question 1 
    </td> 
    <td> 
     <div class="btn-group" role="group" aria-label="..." id="Rating"> 
     <button type="button" id="btnYes" value="yes" class="btn btn-default btn-response" data-rating="Yes">Yes</button> 
     <button type="button" id="btnNo" value="no" class="btn btn-default btn-response" data-rating="No">No</button> 
     <button type="button" id="btnNa" value="na" class="btn btn-default btn-response" data-rating="NA">N/A</button> 
     </div> 
    </td> 
    </tr> 
    <tr> 
    <td> 
     Question 2 
    </td> 
    <td> 
     <div class="btn-group" role="group" aria-label="..." id="Rating"> 
     <button type="button" id="btnYes" value="yes" class="btn btn-default btn-response" data-rating="Yes">Yes</button> 
     <button type="button" id="btnNo" value="no" class="btn btn-default btn-response" data-rating="No">No</button> 
     <button type="button" id="btnNa" value="na" class="btn btn-default btn-response" data-rating="NA">N/A</button> 
     </div> 
    </td> 
    </tr> 
    <tr> 
    <td> 
     Question 3 
    </td> 
    <td> 
     <div class="btn-group" role="group" aria-label="..." id="Rating"> 
     <button type="button" id="btnYes" value="yes" class="btn btn-default btn-response" data-rating="Yes">Yes</button> 
     <button type="button" id="btnNo" value="no" class="btn btn-default btn-response" data-rating="No">No</button> 
     <button type="button" id="btnNa" value="na" class="btn btn-default btn-response" data-rating="NA">N/A</button> 
     </div> 
    </td> 
    </tr> 
    <tr> 
    <td> 
     Question 4 
    </td> 
    <td> 
     <div class="btn-group" role="group" aria-label="..." id="Rating"> 
     <button type="button" id="btnYes" value="yes" class="btn btn-default btn-response" data-rating="Yes">Yes</button> 
     <button type="button" id="btnNo" value="no" class="btn btn-default btn-response" data-rating="No">No</button> 
     <button type="button" id="btnNa" value="na" class="btn btn-default btn-response" data-rating="NA">N/A</button> 
     </div> 
    </td> 
    </tr> 

</table> 

jQueryのは...

//Set up click event on the Remove button 
$('.btn-response').click(function(event) { 
    $(this).addClass("selectedAnswer"); 
}); 

リンクです。これを行うには良い方法でhttps://jsfiddle.net/webdevguy2/0mzjyvw2/2/

任意の提案ですか？

Answer 1

jQuery APIの.siblings()について読んでください。これに

$('.btn-response').click(function (event) { 
    $(this).addClass("selectedAnswer"); 
}); 

：この

変更

$('.btn-response').click(function (event) { 
    $(this).addClass("selectedAnswer").siblings().removeClass("selectedAnswer"); 
}); 

Answer 2

あなたのアプローチは完全に十分です。クラスを追加する前にまず.btn-responseからクラスを削除するのを忘れてしまった。それを行うための最も簡単な方法は、ちょうどあなたのスクリプトを変更します

$('.btn-response').click(function (event) { 
    // We're removing the class here 
    $('.btn-response').removeClass("selectedAnswer"); 

    // And were adding it to JUST THE CLICKED ONE here 
    $(this).addClass("selectedAnswer"); 
});