使用 javascript 和 css 类切换按钮

Question

我正在尝试通过使用 css 类在按钮上使用切换脚本。

问题：当我点击button2 时，它会自动选择button3，这是不正确的。

一次只有一个按钮会在点击时激活。

function togbtn9() {
  $("#b1").toggleClass("blueback greyback");
  $("#b2").toggleClass("blueback greyback");
  $("#b3").toggleClass("blueback greyback");

}

.greyback {
  background-color: rgb(240, 240, 240) !important;
  color: #000000;
}

.f9 {
  font-size: 0.9em !important;
}

.noround {
  border-radius: 0px 0px 0px 0px !important;
  box-shadow: 0px 0px 4px #CCCCCC;
}

.blueback {
  background-color: rgb(10, 102, 60) !important;
  color: #FFFFFF !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />

<div class="col-12 f9">
  <div class="btn-group">
    <button type="button" id="b1" onclick="togbtn9()" class="btn blueback f9 noround">Button1</button>
    <button type="button" id="b2" onclick="togbtn9()" class="btn f9 greyback noround">Button2</button>
    <button type="button" id="b3" onclick="togbtn9()" class="btn f9 greyback noround">Button3</button>
  </div>
</div>

Answer 1

当您单击 Button2 时，所有按钮都会被切换。这意味着按钮 1 关闭，按钮 2 开启，按钮 3 开启。

一种更简单的方法是从所有按钮中删除 blueback 类，然后将其应用于按下的按钮。请参阅下面的示例。

在示例中，我还将 onclick 转换为 jQuery 事件处理程序，因此如果您添加更多按钮，以后维护起来会更容易。

$(".btn").on("click",togbtn9);

function togbtn9() {
  $(".blueback").removeClass("blueback");
  $(this).addClass("blueback");
}

.greyback {
  background-color: rgb(240, 240, 240) !important;
  color: #000000;
}

.f9 {
  font-size: 0.9em !important;
}

.noround {
  border-radius: 0px 0px 0px 0px !important;
  box-shadow: 0px 0px 4px #CCCCCC;
}

.blueback {
  background-color: rgb(10, 102, 60) !important;
  color: #FFFFFF !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />

<div class="col-12 f9">
  <div class="btn-group">
    <button type="button" id="b1" class="btn blueback greyback f9 noround">Button1</button>
    <button type="button" id="b2" class="btn f9 greyback noround">Button2</button>
    <button type="button" id="b3" class="btn f9 greyback noround">Button3</button>
  </div>
</div>