Question

我在按钮组上具有css和js，因此，当您从该组中单击一个按钮时，该按钮显示为活动状态，而当您单击另一个按钮时，该按钮将变为活动状态，其余的按钮将被清除。我的页面上必须有22个这样的按钮组（为了节省空间，我只在这里放了2个），当我只有一个代码起作用时，但是当我添加其他按钮时，所有东西都崩溃了，任何人都可以帮忙！如何多次使用该脚本，其中该脚本应用于每个组，并且不干预其他组。

function codeAddress() {
  var header = document.getElementById("myDIV");
  var btns = header.getElementsByClassName("btn");
  for (var 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";
    });
  }
}
window.onload = codeAddress;

.btn {
  background-color: white;
  border: 3px solid #0099ff;
  color: #0099ff;
  cursor: pointer;
  float: left;
  padding: 10px 16px;
  font-size: 18px;
}

.active,
.btn:hover {
  background-color: #0099ff;
  color: white;
  border: 3px solid #0099ff;
  cursor: pointer;
}

<div id="myDIV">
  <button class="btn active">GQL</button>
  <button class="btn">PSV</button>
  <button class="btn">WT2</button>
  <button class="btn">NBV</button>
  <button class="btn">MBD</button>
</div>
<div id="myDIV">
  <button class="btn active">GQL</button>
  <button class="btn">PSV</button>
  <button class="btn">WT2</button>
  <button class="btn">NBV</button>
  <button class="btn">MBD</button>
</div>

Answer 1

它不起作用，因为您有多个ID：

<div id="myDIV">...</div>
<div id="myDIV">...</div>

您无法执行此操作-首先，它是无效的HTML，其次，它将使用JS执行以下两项操作之一：导致错误，您可以在控制台中看到它，或者将处理{{ 1}}作为NodeList，它是与查询选择匹配的节点的集合，这意味着它将无法工作。如果使它们都具有不同的ID（例如header，div1，div2等），则可以通过修改代码以使用多个div3来实现。 br /> 另一个选择是创建一个类（例如divs）并修改您现有的JavaScript代码以使用一个类。

Answer 2

建议不要使用单个按钮，而是使用单选按钮。它已经内置了功能，可以将与您要选择的选项组合在一起。然后，您只需要使用内置命令来设置活动按钮或检查值即可。

https://www.w3schools.com/jsref/prop_radio_checked.asp

https://www.w3schools.com/html/html_forms.asp

Answer 3

以下是您需要的示例https://jsbin.com/bomegabiqo/1/edit?html,js,output

首先，我想说的是，您不必将两个div与相同的id 第二点是，由于最佳实践和性能优化（您可以在某处阅读），您需要将eventListener附加到父元素上。

因此，这里是HTML的更新版本：

<div id="myGroupButtonsWrapper">  
  <div id="myDIV">
    <button class="btn active">GQL</button>
    <button class="btn">PSV</button>
    <button class="btn">WT2</button>
    <button class="btn">NBV</button>
    <button class="btn">MBD</button>
  </div>
  <div id="myDIVV">
    <button class="btn">GQL</button>
    <button class="btn">PSV</button>
    <button class="btn">WT2</button>
    <button class="btn">NBV</button>
    <button class="btn">MBD</button>
  </div>
</div>

和JavaScript：

function codeAddress() {

  function myClickCallback(e) {
    if (e.target.className === 'btn') {
      var allButtons = document.querySelectorAll("#myGroupButtonsWrapper .btn");

      allButtons.forEach((elem) => {
        elem.className = elem.className.replace(" active", "");           
      });
      e.target.className += ' active';    
    } else {
      return;
    }
  }

  var header = document.getElementById("myGroupButtonsWrapper");   
  header.addEventListener("click", myClickCallback);    
} 
window.onload = codeAddress;

Answer 4

只需3个步骤即可轻松完成此操作。

// First step is to create a onBtnClick handler function:
// The btn which was clicked can be accessed from event.target
// And then we can use the build in function classList.toggle to toggle the active class on that btn
const onBtnClickHandler = function (ev){ev.target.classList.toggle("active")};

// Next step is to find all btns, this can be done using the build in querySelectorAll function
const btns = document.querySelectorAll('.btn'); //returns NodeList array

// Last step is to add the eventListener callback function to each btn
btns.forEach(btn => btn.addEventListener('click', onBtnClickHandler));

希望这会有所帮助。

Answer 5

这里给这个。我相信这是您在单击不同组中的按钮时期望的预期响应。单选按钮之类的东西。如前所述，ID只能代表一个元素，不能代表多个元素。使用类代替。因此，我将您的ID更改为btn-group类。

function codeAddress() {
    const btnClick = function () {
        this.parentNode.getElementsByClassName("active")[0].classList.remove("active");
        this.classList.add("active");
    };
    document.querySelectorAll(".btn-group .btn").forEach(btn => btn.addEventListener('click', btnClick));

    // This is the same as above just another way of doing it. use which ever you like
    // var btns = document.querySelectorAll(".btn-group .btn");
    // for (var i = 0; i < btns.length; i++) {
    //     btns[i].addEventListener("click", function () {
    //         this.parentNode.getElementsByClassName("active")[0].classList.remove("active");
    //         this.classList.add("active");
    //     });
    // }
   
}
window.onload = codeAddress;

.btn {
    background-color: white;
    border: 3px solid #0099ff;
    color: #0099ff;
    cursor: pointer;
    float: left;
    padding: 10px 16px;
    font-size: 18px;
}

.active,
.btn:hover {
    background-color: #0099ff;
    color: white;
    border: 3px solid #0099ff;
    cursor: pointer;
}

<div class="btn-group">
    <button class="btn active">GQL</button>
    <button class="btn">PSV</button>
    <button class="btn">WT2</button>
    <button class="btn">NBV</button>
    <button class="btn">MBD</button>
</div>
<br style="clear:both">
<div class="btn-group">
    <button class="btn active">GQL</button>
    <button class="btn">PSV</button>
    <button class="btn">WT2</button>
    <button class="btn">NBV</button>
    <button class="btn">MBD</button>
</div>

如何将JavaScript应用于多个按钮组

5 个答案: