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");
});

如何通过jQuery将Button添加到按钮组中的一个按钮？

2 个答案: