javascript - 使用分组按钮动态更改和重置菜单名称

Question

我有一个带有分组按钮的下拉菜单，我想在选择这些按钮时更改名称。我编写了一个简短的脚本来更改 OTHER 按钮在被选择时的innerHTML，但我还希望如果选择组中的另一个按钮，该按钮会恢复到其原始名称 OTHER。

const header = document.getElementById("test");
const btns = header.querySelectorAll('.btn');


for (let i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
  var current = document.getElementsByClassName("active");
  current[0].className = current[0].className.replace(" active", "");
  this.className += " active";
    console.log();
  // Set results to value, unless it's other
  // then set to the value of the selected dropdown
    if($(this).attr("value")){
        document.getElementById("results").textContent = $(this).attr("value")
    }

  });
}

  $(".dropdown-item").click(function () {
         const value = $(this).attr("value");
             document.getElementById('btnGroupDrop1').innerHTML = 
            value + " <span class='caret'></span>"
     document.getElementById("results").textContent = value   
   });

.btn-grey {
  border: none;
  outline: none;
  padding: 10px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
  font-size: 18px;
}

/* Style the active class, and buttons on mouse-over */
.active, .btn-secondary:hover {
  background-color: #666;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div id="test">
  <div class="btn-group" role="group">
  <button class="btn btn-grey active", type="button", value="NONE">NONE</button>
  <button class="btn btn-grey", type="button", value="A">A</button>
  <button class="btn btn-grey", type="button", value="B">B</button>
  <button class="btn btn-grey", type="button", value="C">C</button>
  <div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button" class="btn btn-grey dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      OTHER <span class='caret'></span>
    </button>
    <div class="dropdown-menu"aria-labelledby="btnGroupDrop1">
      <li><a class="dropdown-item" href="#3" value="D">D</a></li>
      <li><a class="dropdown-item" href="#2" value="E">E</a></li>
    <li><a class="dropdown-item" href="#2" value="F">F</a></li>
    </div>
  </div>
</div>
  
 

<div id="results"></div>

如果有帮助，请在此处使用 Codepen:https://codepen.io/mayagans/pen/dyoppZK

Answer 1

您只需在按下其他按钮之一时重置 btnGroupDrop1 元素的 innerHTML 即可:

$("#test > .btn-group > .btn").click(function () {
    document.getElementById('btnGroupDrop1').innerHTML = "OTHER <span class='caret'></span>";
});

const header = document.getElementById("test");
const btns = header.querySelectorAll('.btn');


for (let i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
  var current = document.getElementsByClassName("active");
  current[0].className = current[0].className.replace(" active", "");
  this.className += " active";
    console.log();
  // Set results to value, unless it's other
  // then set to the value of the selected dropdown
    if($(this).attr("value")){
        document.getElementById("results").textContent = $(this).attr("value")
    }

  });
}

  $(".dropdown-item").click(function () {
         const value = $(this).attr("value");
             document.getElementById('btnGroupDrop1').innerHTML = 
            value + " <span class='caret'></span>"
     document.getElementById("results").textContent = value   
   });

  $("#test > .btn-group > .btn").click(function () {
             document.getElementById('btnGroupDrop1').innerHTML = 
            "OTHER <span class='caret'></span>";
   });

.btn-grey {
  border: none;
  outline: none;
  padding: 10px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
  font-size: 18px;
}

/* Style the active class, and buttons on mouse-over */
.active, .btn-secondary:hover {
  background-color: #666;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div id="test">
  <div class="btn-group" role="group">
  <button class="btn btn-grey active", type="button", value="NONE">NONE</button>
  <button class="btn btn-grey", type="button", value="A">A</button>
  <button class="btn btn-grey", type="button", value="B">B</button>
  <button class="btn btn-grey", type="button", value="C">C</button>
  <div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button" class="btn btn-grey dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      OTHER <span class='caret'></span>
    </button>
    <div class="dropdown-menu"aria-labelledby="btnGroupDrop1">
      <li><a class="dropdown-item" href="#3" value="D">D</a></li>
      <li><a class="dropdown-item" href="#2" value="E">E</a></li>
    <li><a class="dropdown-item" href="#2" value="F">F</a></li>
    </div>
  </div>
</div>
  
 

<div id="results"></div>