<body> <button class="rating">A</button> <button class="rating">B</button>const buttonList = document.querySelectorAll(".rating");
buttonList.forEach((element) =\> {
element.addEventListener("click", function () {
document.querySelector(".rating").classList.remove("active");
element.classList.add("active");
});
});
.active { background-color: aqua; } 我想要的是，当你点击一个按钮时，它会收到一个名为“active”的类，而其他按钮如果有那个 active 类，它应该被删除。但是当我点击B按钮时，A按钮的active类被移除了，但是当我点击A按钮时，active类仍然存在于B按钮中。
document.querySelector(".rating")如果只能选择一个元素，选择有类的那个。
const prevSelected = document.querySelector(".rating.selected");
if (prevSelected) {
prevSelected.classList.remove("active");
}
也可以写成
document.querySelector(".rating.selected")?.classList.remove("active");
创建了一个演示来解决这个问题：
const buttonList = document.querySelectorAll(".rating");
buttonList.forEach((element) => {
element.addEventListener("click", function() {
const buttons = document.querySelectorAll(".rating")
buttons.forEach((b) => {
b.classList.remove("active");
})
element.classList.add("active");
});
});.active {
background-color: aqua;
}<button class="rating">A</button>
<button class="rating">B</button>您需要查询
.activedocument.querySelector(".active")const buttonList = document.querySelectorAll(".rating");
buttonList.forEach((element) => {
element.addEventListener("click", function () {
document.querySelector(".active")?.classList.remove("active");
element.classList.add("active");
});
});.active { background-color: aqua; }<button class="rating">A</button>
<button class="rating">B</button>