我正在尝试编写每行只能选择一个按钮的代码。我尝试了太多次,这是我最接近的一次。
我可以选择和取消选择它。但是每行只能选择一个。 我的代码做了什么:
我可以选择任何按钮,它会被添加一个类,它会变红。 所以现在这个按钮被选中了。我也可以取消选择它。
这是我的代码:
$('.btn').click(function(){
if ($(this).attr('data-selected') === 'true') {
$(this).attr('data-selected', 'false');
$(this).removeClass('selected');
}else {
$(this).attr('data-selected', 'true');
$(this).addClass('selected');
}
});
<style>
.selected {
color:red;
}
</style>
最佳答案
你可以像下面那样做。只需找到其他 .btn
并从中删除 .selected
并将 data-selected
设置为 false
选择一个 .btn
。希望这对您有所帮助。
$('.btn').click(function () {
if ($(this).attr('data-selected') === 'true') {
$(this).attr('data-selected', 'false');
$(this).removeClass('selected');
} else {
$(this).closest('tr').find('.btn').not(this)
.removeClass('selected').attr('data-selected', 'false');
$(this).attr('data-selected', 'true');
$(this).addClass('selected');
}
});
.selected {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>2</td>
<td><input type="button" value="1.22" class="btn"/></td>
<td><input type="button" value="1.33" class="btn" /></td>
<td><input type="button" value="1.44" class="btn" /></td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td><input type="button" value="1.22" class="btn" /></td>
<td><input type="button" value="1.33" class="btn" /></td>
<td><input type="button" value="1.44" class="btn" /></td>
</tr>
</table>
关于javascript - 每行只能点击一个按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34638985/