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>

保持一个按钮激活

2 个答案: