保持一个按钮处于活动状态

Question

我正在尝试制作状态按钮。基本上，人们用这个来显示他们的当前状态。我希望当前选定的状态具有css btn:selected类。但是，当你按下另一个按钮时，这个按钮将接受所选的课程，而另一个将恢复正常。

​

<div class="status-buttons">
    <a href="#" target="_blank">
        <button class="btn btn-primary" name="statusSelect" id="statusSelect">10 Codes</button>
    </a>
    <button class="btn btn-primary <?php echo $_SESSION['identifier'];?>" name="statusSelect" id="statusSelect" onClick="responderChangeStatus(this)" value="10-99">10-99 (Panic Button)</button>
    <button class="btn btn-primary <?php echo $_SESSION['identifier'];?>" name="statusSelect" id="statusSelect" onClick="responderChangeStatus(this)" value="10-8">10-8</button>
    <button class="btn btn-primary <?php echo $_SESSION['identifier'];?>" name="statusSelect" id="statusSelect" onClick="responderChangeStatus(this)" value="10-7">10-7</button>
    <button class="btn btn-primary <?php echo $_SESSION['identifier'];?>" name="statusSelect" id="statusSelect" onClick="responderChangeStatus(this)" value="10-6">10-6</button>
    <button class="btn btn-primary <?php echo $_SESSION['identifier'];?>" name="statusSelect" id="statusSelect" onClick="responderChangeStatus(this)" value="10-97">10-97</button>
    <button class="btn btn-primary <?php echo $_SESSION['identifier'];?>" name="statusSelect" id="statusSelect" onClick="responderChangeStatus(this)" value="10-23">10-23</button>
</div>

​

我假设这需要一些JavaScript或类似的东西。我几乎没有使用JavaScript和类似语言的经验。我知道基本的PHP、HTML和CSS。就是这样。是的，我知道所有的id都是一样的。我要改变它们。

Answer 1

首先，您必须遍历所有按钮，并将它们改回默认值。您可以删除每个按钮上的所有选定类，无论它是否存在，或者使用classList.contains查找特定按钮并随后中断循环。无论采用哪种方法，您都必须在删除所有选定类后将选定类添加到该按钮中

let btns = document.querySelectorAll('.myButtons');
  for(let i = 0; i < btns.length; i++){
    if(btns[i].classList.contains('selected')) btns[i].classList.remove('selected');
  }
myTargetButton.classList.add('selected');

使用的类和id都是模拟的，用你自己的css选择器填充它们

Answer 2

您必须通过循环将class:selected从所有元素中删除，然后将类添加到当前/单击的元素。

另外，元素ID在整个文档中应该是唯一的，您已经为多个元素设置了相同的ID...

​

function responderChangeStatus( elem ){
  var btnEl = document.querySelectorAll('.statusSelect');
  for (var i = 0; i < btnEl.length; i++) {
      btnEl[i].classList.remove('selected');
  }
  elem.classList.add('selected');
  return;
}

.selected {
  background-color: green;
}

<div class="status-buttons">
<a href="#" target="_blank">
<button class="btn btn-primary statusSelect"
onClick="responderChangeStatus(this)" name="statusSelect" id="uniqueId01">10 Codes</button></a>
<button class="btn btn-primary <?php echo $_SESSION['identifier'];?> statusSelect" name="statusSelect" id="uniqueId02" onClick="responderChangeStatus(this)" value="10-99">10-99 (Panic Button)</button>
<button class="btn btn-primary <?php echo $_SESSION['identifier'];?> statusSelect" name="statusSelect" id="uniqueId03" onClick="responderChangeStatus(this)" value="10-8">10-8</button>
<button class="btn btn-primary <?php echo $_SESSION['identifier'];?> statusSelect" name="statusSelect" id="uniqueId04" onClick="responderChangeStatus(this)" value="10-7">10-7</button>
<button class="btn btn-primary <?php echo $_SESSION['identifier'];?> statusSelect" name="statusSelect" id="uniqueId05" onClick="responderChangeStatus(this)" value="10-6">10-6</button>
<button class="btn btn-primary <?php echo $_SESSION['identifier'];?> statusSelect" name="statusSelect" id="uniqueId06" onClick="responderChangeStatus(this)" value="10-97">10-97</button>
<button class="btn btn-primary <?php echo $_SESSION['identifier'];?> statusSelect" name="statusSelect" id="uniqueId07" onClick="responderChangeStatus(this)" value="10-23">10-23</button>
</div>

​