当我单击一个按钮并更改所选按钮的颜色时，我试图重置所有背景颜色。我希望一开始一个按钮的背景颜色为深灰色，如代码段所示，当我单击另一个按钮时，所有按钮都将重置为白色，并且单击的按钮将变为深灰色。我怎样才能做到这一点？现在当我点击另一个按钮时没有任何反应。这是我的代码，有什么问题吗？<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> /* Style the buttons */ .portfolio-buttons { border: none; outline: none; padding: 12px 16px; /* background-color: white; */ cursor: pointer; } .portfolio-buttons-normal { background-color: white; } .portfolio-buttons:hover { background-color: #ddd; } .portfolio-buttons-active { background-color: #666; color: white; } </style></head><body> <div id="myBtnContainer"> <button class="portfolio-buttons portfolio-buttons-normal portfolio-buttons-active">Show all</button> <button class="portfolio-buttons portfolio-buttons-normal" >.html</button> <button class="portfolio-buttons portfolio-buttons-normal">.css</button> <button class="portfolio-buttons portfolio-buttons-normal" >.js</button> <button class="portfolio-buttons portfolio-buttons-normal" >.java</button> <button class="portfolio-buttons portfolio-buttons-normal" >.py</button> </div> <script> function changeClass(button, classRef) { button.classList.forEach((className) => { if (className.startsWith("portfolio-buttons-active")) button.classList.remove(className); }); console.log(classRef); button[classRef].classList.add("portfolio-buttons-active"); } </script></body></html>
3 回答
Smart猫小萌
TA贡献1911条经验 获得超7个赞
你太复杂了:)你正确地设置了你的点击监听器，但你只需要在监听器中执行 2 个简单的步骤：
1. 重置当前活动按钮：只需获取所有具有活动类的按钮（我们不关心其余的，所以不需要处理它们！）并删除它：
document.querySelectorAll(".portfolio-buttons-active").forEach((button) => {
button.classList.remove("portfolio-buttons-active");
});
2. 将单击的按钮设置为活动：您的单击处理程序已添加到按钮，因此我们在单击该按钮时向其添加活动类：
button.classList.add("portfolio-buttons-active");
就是这样！将这些放在一起，您需要的是以下内容：
document.querySelectorAll(".portfolio-buttons").forEach((button) => {
button.addEventListener("click", function() {
// Reset the currently active buttons:
document.querySelectorAll(".portfolio-buttons-active").forEach((button) => {
button.classList.remove("portfolio-buttons-active");
});
// Add the active class to the clicked button
button.classList.add("portfolio-buttons-active");
});
});
工作示例：我已将步骤 1 和 2 放入此代码中的函数中，以防您以后需要在每个步骤中添加更多功能
/* Add the active class to the button passed in */
function setThisButtonActive(button) {
button.classList.add("portfolio-buttons-active");
}
/* select all active buttons, and remove the active class from them */
function resetActiveButton() {
document.querySelectorAll(".portfolio-buttons-active").forEach((button) => {
button.classList.remove("portfolio-buttons-active");
});
}
document.querySelectorAll(".portfolio-buttons").forEach((button) => {
button.addEventListener("click", function() {
resetActiveButton();
setThisButtonActive(button);
});
});
/* Style the buttons */
.portfolio-buttons {
border: none;
outline: none;
padding: 12px 16px;
/* background-color: white; */
cursor: pointer;
}
.portfolio-buttons-normal {
background-color: white;
}
.portfolio-buttons:hover {
background-color: #ddd;
}
.portfolio-buttons-active {
background-color: #666;
color: white;
}
<div id="myBtnContainer">
<button class="portfolio-buttons portfolio-buttons-normal portfolio-buttons-active">Show
all</button>
<button class="portfolio-buttons portfolio-buttons-normal">.html</button>
<button class="portfolio-buttons portfolio-buttons-normal">.css</button>
<button class="portfolio-buttons portfolio-buttons-normal">.js</button>
<button class="portfolio-buttons portfolio-buttons-normal">.java</button>
<button class="portfolio-buttons portfolio-buttons-normal">.py</button>
</div>
烙印99
TA贡献1829条经验 获得超13个赞
.您在querySelectorAll选择按钮的地方缺少一个。所以它正在寻找元素portfolio-buttons而不是类。
该classList接口有一个contains方法来检查元素上是否存在类。所以不需要循环检查字符串className。也根本没有必要，如果类不在元素上，则不会删除任何内容。
对于重置按钮，给它一个方法来识别它的唯一性。在上面的示例中，我给了它一个value带有字符串的属性。单击时检查是否单击了重置按钮，并且不要添加新的活动类。
const buttons = document.querySelectorAll(".portfolio-buttons");
buttons.forEach((button) => {
button.addEventListener('click', event => {
buttons.forEach(button => button.classList.remove('portfolio-buttons-active'));
if (button.value !== 'reset') {
button.classList.add('portfolio-buttons-active');
}
});
});
/* Style the buttons */
.portfolio-buttons {
border: none;
outline: none;
padding: 12px 16px;
/* background-color: white; */
cursor: pointer;
}
.portfolio-buttons-normal {
background-color: white;
}
.portfolio-buttons:hover {
background-color: #ddd;
}
.portfolio-buttons-active {
background-color: #666;
color: white;
}
<div id="myBtnContainer">
<button class="portfolio-buttons portfolio-buttons-normal portfolio-buttons-active" value="reset">Show all</button>
<button class="portfolio-buttons portfolio-buttons-normal">.html</button>
<button class="portfolio-buttons portfolio-buttons-normal">.css</button>
<button class="portfolio-buttons portfolio-buttons-normal">.js</button>
<button class="portfolio-buttons portfolio-buttons-normal">.java</button>
<button class="portfolio-buttons portfolio-buttons-normal">.py</button>
</div>
绝地无双
TA贡献1946条经验 获得超4个赞
您可以通过检查来简化它e.target：
const buttons = document.querySelectorAll(".portfolio-buttons");
buttons.forEach(button => {
button.addEventListener("click", function(e) {
e.target.classList.add('portfolio-buttons-active');
buttons.forEach(item => {
if (item !== e.target) {
item.classList.remove('portfolio-buttons-active');
}
});
});
});
.portfolio-buttons {
border: none;
outline: none;
padding: 12px 16px;
/* background-color: white; */
cursor: pointer;
}
.portfolio-buttons-normal {
background-color: white;
}
.portfolio-buttons:hover {
background-color: #ddd;
}
.portfolio-buttons-active {
background-color: #666;
color: white;
}
<div id="myBtnContainer">
<button class="portfolio-buttons portfolio-buttons-normal portfolio-buttons-active">Show
all</button>
<button class="portfolio-buttons portfolio-buttons-normal">.html</button>
<button class="portfolio-buttons portfolio-buttons-normal">.css</button>
<button class="portfolio-buttons portfolio-buttons-normal">.js</button>
<button class="portfolio-buttons portfolio-buttons-normal">.java</button>
<button class="portfolio-buttons portfolio-buttons-normal">.py</button>
</div>
如果e.target不是循环中的当前元素，则删除活动类，否则，添加活动类。
添加回答
举报
0/150
提交
取消