我有一个 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/
关于更好的方法的任何建议?
阅读.siblings()
jQuery API。
改变这个:
$('.btn-response').click(function (event) {
$(this).addClass("selectedAnswer");
});
对此:
$('.btn-response').click(function (event) {
$(this).addClass("selectedAnswer").siblings().removeClass("selectedAnswer");
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句