var header = document.getElementById("myDIV");
var btns = header.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function(){
if (this.dataset.active == "active") {
this.dataset.active = "inactive";
} else {
this.dataset.active = "active";
}
}
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Style the buttons */
.btn {
border: none;
outline: none;
padding: 10px 16px;
background-color: #f1f1f1;
cursor: pointer;
font-size: 18px;
}
/* Style the active class, and buttons on mouse-over */
.btn[data-active="active"], .btn:hover {
background-color: #666;
color: white;
}
</style>
</head>
<body>
<h1>Active Button</h1>
<p>Highlight the active/current (pressed) button.</p>
<div id="myDIV">
<button class="btn">1</button>
<button class="btn" data-active="active">2</button>
<button class="btn">3</button>
<button class="btn">4</button>
<button class="btn">5</button>
</div>我希望一次只有一个按钮处于事件状态，具有data-active = "active"，如果更改为删除事件并移至新按钮按下按钮，但我的代码现在使 一切 如果不活跃则不活跃，如果活跃则不活跃，我只希望一个按钮处于事件状态
像单选框
最佳答案
在您的onclick 函数中，您需要将每个按钮设置为inactive。这可以通过创建一个第二个循环来完成，如下所示:
var header = document.getElementById("myDIV");
var btns = header.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function() {
for (var j = 0; j < btns.length; j++) {
btns[j].dataset.active = "inactive";
}
if (this.dataset.active == "active") {
this.dataset.active = "inactive";
} else {
this.dataset.active = "active";
}
}
}/* Style the buttons */
.btn {
border: none;
outline: none;
padding: 10px 16px;
background-color: #f1f1f1;
cursor: pointer;
font-size: 18px;
}
/* Style the active class, and buttons on mouse-over */
.btn[data-active="active"],
.btn:hover {
background-color: #666;
color: white;
}<h1>Active Button</h1>
<p>Highlight the active/current (pressed) button.</p>
<div id="myDIV">
<button class="btn">1</button>
<button class="btn" data-active="active">2</button>
<button class="btn">3</button>
<button class="btn">4</button>
<button class="btn">5</button>
</div>请注意，您可能还想使用 addEventListener() 而不是 onclick，这样您的逻辑就与您的表示分离了。这可以从以下方面看出:
var header = document.getElementById("myDIV");
var btns = header.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
for (var j = 0; j < btns.length; j++) {
btns[j].dataset.active = "inactive";
}
if (this.dataset.active == "active") {
this.dataset.active = "inactive";
} else {
this.dataset.active = "active";
}
})
}/* Style the buttons */
.btn {
border: none;
outline: none;
padding: 10px 16px;
background-color: #f1f1f1;
cursor: pointer;
font-size: 18px;
}
/* Style the active class, and buttons on mouse-over */
.btn[data-active="active"],
.btn:hover {
background-color: #666;
color: white;
}<h1>Active Button</h1>
<p>Highlight the active/current (pressed) button.</p>
<div id="myDIV">
<button class="btn">1</button>
<button class="btn" data-active="active">2</button>
<button class="btn">3</button>
<button class="btn">4</button>
<button class="btn">5</button>
</div>关于javascript - 按数据一键激活5键，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58106868/