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>

有关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。

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

希望这会有所帮助：）

选择时更改背景

2 个答案:

替代