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

Question

我在按钮组上有 css 和 js，这样当您单击该组中的一个按钮时，它会显示为活动状态，而当您单击另一个按钮时，该按钮将变为活动状态，其余按钮将被清除.我的页面上必须有 22 个这样的按钮组（为了 space，我只在这里放了 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 做两件事之一：导致错误，你可以在控制台中看到，或者它会将 header 视为一个 NodeList，它是与查询选择相匹配的节点的集合，这意味着它不会起作用。如果您让它们都具有不同的 ID（例如 div1、div2、div3 等），如果您修改代码以采用多个 divs。
另一种选择是制作 class（例如 myDIV）并修改现有的 JavaScript 代码以使用 class.

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 只能代表一个元素，不能代表多个。请改用 class。所以我把你的 id 改成 class 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 应用于多个按钮组

How to apply javascript to multiple button groups

javascript

jquery

css

webpage

buttongroup