javascript - 如何将javascript应用于多个按钮组
问题描述
我在按钮组上有 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>
解决方案
这里先给出这个。我相信这是您在单击来自不同组的按钮时所期望的预期响应。类似单选按钮的东西。正如已经提到的,一个 ID 只能代表一个元素而不是多个元素。改用类。所以我把你的 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>
推荐阅读
- python - Python CApi 引用计数详细信息
- node.js - 无法通过依赖 node-gyp 的 npm 安装包
- c# - 如何将数据保存为与 Entity Framework 的一对零或一对一的关系
- winforms - 在 DataGridView 中显示表格(在表单内部)
- python - numpy 更新数组索引
- icalendar - iCal .ics 文件:允许用户确认
- php - 命名空间和包括脚本问题
- python - 每次触发窗口函数
- selenium - 当记录器处于从方法(类 2)调用的方法(类 1)中时,范围报告 2.41 抛出空指针
- salesforce - Salesforce 跟踪就像在 Marketing Cloud 中一样