选择时更改背景

Question

我正在尝试引导程序，但似乎卡住了。我有一些单选按钮，但我想要的是在未选择时勾勒出轮廓，并在选择时显示为实心或“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>

Answer 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>

有关在没有框架的情况下绑定事件和更改元素类的更多信息，请参阅这两个答案。

替代

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

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

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