我试图在我的弹出窗口中实现一个可切换的按钮组。它有点……但不完全。这是代码，解释起来有点复杂，所以请启用代码段中的所有按钮，然后您就会看到。是的，我知道。代码非常未经优化，只是试图让它工作。 谢谢你的帮助! :)
document.getElementById("off1").addEventListener("click", function() {
if(document.getElementById("off1")) {
document.getElementById("off1").id = "on";
} else {
document.getElementById("on").id = "off1";
}
});
document.getElementById("off2").addEventListener("click", function() {
if(document.getElementById("off2")) {
document.getElementById("off2").id = "on";
} else {
document.getElementById("on").id = "off2";
}
});
document.getElementById("off3").addEventListener("click", function() {
if(document.getElementById("off3")) {
document.getElementById("off3").id = "on";
} else {
document.getElementById("on").id = "off3";
}
});
document.getElementById("off4").addEventListener("click", function() {
if(document.getElementById("off4")) {
document.getElementById("off4").id = "on";
} else {
document.getElementById("on").id = "off4";
}
});
document.getElementById("off5").addEventListener("click", function() {
if(document.getElementById("off5")) {
document.getElementById("off5").id = "on";
} else {
document.getElementById("on").id = "off5";
}
});
document.getElementById("off6").addEventListener("click", function() {
if(document.getElementById("off6")) {
document.getElementById("off6").id = "on";
} else {
document.getElementById("on").id = "off6";
}
});
document.getElementById("off7").addEventListener("click", function() {
if(document.getElementById("off7")) {
document.getElementById("off7").id = "on";
} else {
document.getElementById("on").id = "off7";
}
});
document.getElementById("off8").addEventListener("click", function() {
if(document.getElementById("off8")) {
document.getElementById("off8").id = "on";
} else {
document.getElementById("on").id = "off8";
}
});input {
width: 95px;
float:left;
font-size: 12px;
border-radius: 2px;
margin: 5px;
padding: 3px;
}
#off1, #off2, #off3, #off4, #off5, #off6, #off7, #off8 {
background-color: #101820FF;
color: #fff;
border:1px solid white;
}
#on {
background-color: #FEE715FF;
color:#101820FF;
border: 1px solid #FEE715FF;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/popup.css">
</head>
<body>
<div class="item-toggle-group">
<input type="button" id="off1" value="jackets">
<input type="button" id="off2" value="shirts">
<input type="button" id="off3" value="tops/sweaters">
<input type="button" id="off4" value="sweatshirts">
<input type="button" id="off5" value="pants">
<input type="button" id="off6" value="hats">
<input type="button" id="off7" value="bags">
<input type="button" id="off8" value="accessories">
<script src="../js/toggleButton.js"></script>
</div>
</body>
</html>最佳答案
使用数据属性来标识按钮是否打开，并使用类来标识按钮。
HTML
<input type="button" class="button" value="jackets" data-on="0">
<input type="button" class="button" value="thing2" data-on="0">
<input type="button" class="button" value="thing3" data-on="0">
<input type="button" class="button" value="thing4" data-on="0">
<input type="button" class="button" value="thing5" data-on="0">
Javascript
document.getElementsByClassName("button").addEventListener("click", function() {
if(this.getAttribute("data-on") == "1") {
this.setAttribute("data-on", "0");
} else {
this.setAttribute("data-on", "1");
}
});
CSS
.button {
... css for buttons that are off
}
.button[data-on=1] {
... css for buttons that are on
}
使用类使其变得通用，因此您可以动态添加按钮，而无需为该特定按钮添加事件监听器。
关于JavaScript:切换按钮组无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57961060/