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个值之间切换即可选择特定值，选择的按钮是一个值，所有其他按钮是另一个值。

断口

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>

如何在点击按钮时切换按钮的值和类别

1 个答案: