jquery - 如何在按钮单击时切换按钮的值和类

Question

我有 4 个按钮，我只希望一个按钮被明显选中，而另外 3 个按钮明显不被选中。

<td width=10%><button class="stuck unstuck" name="doR1" id="doR1"  onclick="doR('1');">AP Enquiry</button></td>
<td width=10%><button class="stuck unstuck" name="doR2" id="doR2" onclick="doR('2');">HM Enquiry</button></td>
<td width=10%><button class="stuck unstuck" name="doR3" id="doR3" onclick="doR('3');">Ac/Rj Pgm</button></td>
<td width=10%><button class="stuck unstuck" name="doR4" id="doR4" onclick="doR('4');">Property Enq</button></td>

我可以使用

$(".stuck").click(function(event){
  event.preventDefault()
  $(this).toggleClass('unstuck');
}); 

但这还不够，因为我只想更改单击的最新按钮的类，此代码将允许我更改所有按钮的类。我还想仅更改最新选择的值。特定值无关紧要，只要它在 2 个值之间切换，所选按钮为一个值，所有其他按钮为另一个值。

Jbap

标签： jquery

Answer 1

从您的评论中：

我想更改该值，以便在执行另一个操作时，它会检查按下哪个按钮，以便可以根据按下哪个按钮来执行某些操作。有点像一个巨大的收音机选择。

在这种情况下，将不同的类添加到按钮而不是更改它的类会更简单value，因为它是静态的。当后面的动作发生时，您可以通过将类放在选择器中找到活动按钮，如下所示：

$(".stuck").click(function(e) {
  e.preventDefault()
  $(this).toggleClass('unstuck');
  $(this).addClass('active');
  $('.stuck').not(this).removeClass('active');
});

$('a').click(function(e) {
  e.preventDefault();
  console.log($('button.active').prop('id') || 'Nothing selected');
});

.active {
  color: #C00;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td width="10%"><button class="stuck unstuck" name="doR1" id="doR1">AP Enquiry</button></td>
    <td width="10%"><button class="stuck unstuck" name="doR2" id="doR2">HM Enquiry</button></td>
    <td width="10%"><button class="stuck unstuck" name="doR3" id="doR3">Ac/Rj Pgm</button></td>
    <td width="10%"><button class="stuck unstuck" name="doR4" id="doR4">Property Enq</button></td>
  </tr>
</table>

<a href="#">Click me</a>