选择时更改背景答案

【问题标题】：Change background when select选择时更改背景
【发布时间】：2019-09-13 14:02:26
【问题描述】：

我正在尝试引导程序，但似乎被卡住了。我有一些单选按钮，但我想要的是在未选中时对其进行概述，在选中时显示为实心或“btn-primary”。

我可以尝试使用 JavaScript，但我可能必须给每个人一个单独的 ID，然后从那里开始。我确信 JavaScript 有更好的方法

        <div class="row">
            <div class="col offset-md-2">
                <div class="form-group">
                    <div class="btn-group">
                        <button type="button" class="btn btn-outline-secondary" id="zone1">Zone 1</button>
                        <button type="button" class="btn btn-outline-secondary" id="zone2">Zone 2</button>
                        <button type="button" class="btn btn-outline-secondary" id="zone3">Zone 3</button>
                        <button type="button" class="btn btn-outline-secondary" id="zone4">Zone 4</button>
                        <button type="button" class="btn btn-outline-secondary" id="zone5">Zone 5</button>
                        <button type="button" class="btn btn-outline-secondary" id="zone6">Zone 6</button>
                        <button type="button" class="btn btn-outline-secondary" id="bush">Bush</button>
                    </div>      
                </div>
            </div>
        </div>

【问题讨论】：

请包含仅需要的代码，您说过您有radio buttons，但在您的代码中我看不到任何单选按钮。
Custom radio button using css的可能重复

标签： javascript bootstrap-4

【解决方案1】：

如果您想使用纯 JavaScript 实现此目的，您可以将点击处理程序绑定到每个元素。单击按钮时，处理程序将修改元素的类：

var buttons = document.getElementsByTagName("button");

for (var i = 0; i < buttons.length; i++) {   

 buttons[i].onclick = function() {
    this.classList.remove('btn-outline-secondary');
    this.classList.add('btn-primary');
 }

}

.btn-outline-secondary {border: 1px solid #aaa;}
.btn-primary {border: 1px solid blue; background: blue; color: white;}

<div class="row">
  <div class="col offset-md-2">
    <div class="form-group">
      <div class="btn-group">
        <button type="button" class="btn btn-outline-secondary" id="zone1">Zone 1</button>
        <button type="button" class="btn btn-outline-secondary" id="zone2">Zone 2</button>
        <button type="button" class="btn btn-outline-secondary" id="zone3">Zone 3</button>
        <button type="button" class="btn btn-outline-secondary" id="zone4">Zone 4</button>
        <button type="button" class="btn btn-outline-secondary" id="zone5">Zone 5</button>
        <button type="button" class="btn btn-outline-secondary" id="zone6">Zone 6</button>
        <button type="button" class="btn btn-outline-secondary" id="bush">Bush</button>
      </div>
    </div>
  </div>
</div>

有关binding events without a framework 和changing the class of elements 的更多信息，请参阅这两个答案。

另一种选择

如果您愿意使用 jQuery 等库，绑定事件处理程序可能会简单得多。包含 jQuery 库后，您的代码将是：

$("button").click(function(){ /*apply new class using .removeClass() and .addClass() methods*/ });

有关 .click() 的更多信息，请参阅 the jQuery documentation。

【讨论】：

【解决方案2】：

var button = document.getElementsByTagName("button");

for (var i = 0; i < button.length; i++) {   
 button[i].onmouseover = function() {
    this.classList.remove('btn-outline-secondary');
    this.classList.add('btn-primary');
 }
 
 button[i].onmouseout = function() {
    this.classList.remove('btn-primary');
    this.classList.add('btn-outline-secondary');
 }
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
  <div class="caontainer">
    <div class="row">
      <div class="col offset-md-2">
        <div class="form-group">
          <div class="btn-group">
            <button type="button" class="btn btn-outline-secondary" id="zone1">Zone 1</button>
            <button type="button" class="btn btn-outline-secondary" id="zone2">Zone 2</button>
            <button type="button" class="btn btn-outline-secondary" id="zone3">Zone 3</button>
            <button type="button" class="btn btn-outline-secondary" id="zone4">Zone 4</button>
            <button type="button" class="btn btn-outline-secondary" id="zone5">Zone 5</button>
            <button type="button" class="btn btn-outline-secondary" id="zone6">Zone 6</button>
            <button type="button" class="btn btn-outline-secondary" id="bush">Bush</button>
          </div>      
        </div>
      </div>
    </div>
  </div>
</body>
</html>

希望它会有所帮助:)

【讨论】：