如何重置所有其他按钮的背景颜色并在单击时突出显示所选按钮？
当我单击一个按钮并更改所选按钮的颜色时，我试图重置所有背景颜色。我希望一开始一个按钮的背景颜色为深灰色，如代码段所示，当我单击另一个按钮时，所有按钮都将重置为白色，并且单击的按钮将变为深灰色。我怎样才能做到这一点？
现在当我点击另一个按钮时没有任何反应。
这是我的代码，有什么问题吗？
<!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猫小萌
你太复杂了:)你正确地设置了你的点击监听器，但你只需要在监听器中执行 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
.您在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> -
绝地无双
您可以通过检查来简化它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不是循环中的当前元素，则删除活动类，否则，添加活动类。
随时随地看视频慕课网APP
相关分类
JavaScript