单击每个html时，我希望能够激活每个元素类，这样我就可以在我的代码中看到这三个框中至少有两个激活的html元素。当点击激活的html元素时，我还想删除活动类并重置流。
目前，只有一个元素被设置为活动的onclick
let timeItems = document.querySelectorAll(".box");
timeItems.forEach(item => {
item.addEventListener('click', function() {
timeItems.forEach(btn => btn.classList.remove('active'));
this.classList.add('active');
});
});.box {
background-color: #E5E5E5;
margin-bottom: 10px;
height: 100px;
}
.active {
background-color: #666;
}<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</body>
</html>首先从所有项中删除类，然后将其设置在当前单击的项上。你需要记住之前被点击的元素是什么——这样你就可以在你的循环中专门为那个元素制造一个异常。
previousItem用null初始化。
在循环中，将当前项与previousItem进行比较——只有当它们不同时，才从当前项中删除该类。
最后，previousItem被设置为当前元素this。
let timeItems = document.querySelectorAll(".box"),
previousItem = null;
timeItems.forEach(item => {
item.addEventListener('click', function() {
timeItems.forEach(btn => {
if (btn !== previousItem) {
btn.classList.remove('active');
}
});
this.classList.add('active');
previousItem = this;
});
});.box {
background-color: #E5E5E5;
margin-bottom: 10px;
height: 100px;
}
.active {
background-color: #666;
}<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>我不太明白你的问题。如果你想为每个元素切换激活和关闭，那么你可以使用classList.toggle('active')。这样就没有理由第二次遍历框来删除活动类了。
let timeItems = document.querySelectorAll(".box");
timeItems.forEach((item) => {
item.addEventListener("click", function () {
item.classList.toggle("active");
});
});
大家好，谢谢大家的帮助!除了我的问题，我怎么能重置活动类，使类不活动类时，更改行?
例如，我在一行上选择两个值(08:00 + +15)，当跳转到另一行选择新值时，具有选定值的前一行上的选定值必须重置为零(删除活动类)。
let datetime1 = new Date("2022-04-10 08:00:00"); // Thu Sep 16 2010 13:30:58
let datetime2 = new Date("2022-04-10 16:00:00"); // Tue Aug 18 2015 14:20:48
let open = datetime1.getHours()
let close = datetime2.getHours()
let timeDiff = close - open
let newTimeValue = new Date(open)
console.log(newTimeValue)
let timeDifference = timeDiff;
let currentTimestamp = Date.parse("2022-04-10 08:00:00");
for (let i = 0; i < timeDiff; i++) {
let date = new Date(currentTimestamp + i * (60 * 60 * 1000) );
let timerange = document.createElement("p");
let p = document.createElement("p");
let span = document.createElement("span");
let divContainer = document.createElement("div")
let divContainerTwo = document.createElement("div")
let spanTimeValue = document.createElement("time");
let spanFifteen = document.createElement("time");
let spanThirty = document.createElement("time");
let spanFortyFive = document.createElement("time")
let timeoutput = document.createTextNode(date.toLocaleString(undefined, { timeStyle: "short" }))
let fifteen = document.createTextNode("+15");
let thirty = document.createTextNode("+30");
let forty = document.createTextNode("+45");
p.setAttribute("id", "p-value");
span.setAttribute("id","span-value");
spanTimeValue.setAttribute("id","span-time-value");
spanFifteen.setAttribute("id","span-fifteen");
spanThirty.setAttribute("id","span-thirty");
spanFortyFive.setAttribute("id","span-forty-five");
divContainerTwo.setAttribute("id","div-container__two")
spanTimeValue.className = "time_hour"
spanFifteen.className = "time_minutes";
spanThirty.className = "time_minutes";
spanFortyFive.className = "time_minutes";
document.getElementById("div-container").appendChild(spanTimeValue)
spanTimeValue.appendChild(timeoutput)
document.getElementById("div-container__two").appendChild(p)
document.getElementById("p-value").appendChild(span)
//document.getElementById("span-value")
spanFifteen.appendChild(fifteen)
spanThirty.appendChild(thirty)
spanFortyFive.appendChild(forty)
span.appendChild(spanFifteen)
span.appendChild(spanThirty)
span.appendChild(spanFortyFive)
}
let setTime = document.querySelectorAll(".time_minutes, .time_hour"),
previousItem = null;
setTime.forEach(item => {
item.addEventListener('click', function() {
setTime.forEach(btn => {
if (btn !== previousItem) {
btn.classList.remove('active');
}
});
this.classList.add('active');
previousItem = this;
});
});
.active {
background:#7BB8BE;
color: white;
}
.box {
background-color: #E5E5E5;
margin-bottom: 10px;
height:100px;
}
#choose-time__range {
background: #F9FCFC;
font-family: 'Dosis', sans-serif;
display: flex;
}
#div-container {
display: flex;
flex-direction: column;
}
#p-value {
display: flex;
flex-direction: column;
margin: 0;
}<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="choose-time__range">
<div id="div-container"></div>
<div id="div-container__two"></div>
</div>
</body>
</html>