javascript - JavaScript:切换按钮组无法正常工作
问题描述
我试图在我的弹出窗口中实现一个可切换的按钮组。它工作有点......但不完全。这是代码,解释起来有点复杂,所以请启用代码段中的所有按钮,然后你就会看到。是的,我知道。该代码非常未经优化,只是试图使其工作。谢谢你的帮助!:)
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
}
使用类使其具有通用性,因此您可以即时添加按钮,而无需为该特定按钮添加事件侦听器。
推荐阅读
- spring - 将查询参数映射发送到 Spring uriBuilder
- python - 如何在 Jupyter Python 3 中加载 sklearn 数据?
- c++ - 将 exr/pfm 保存为小端
- java - 无法从 DOMSource 创建 XMLStreamReader 或 XMLEventReader
- php - 为什么 $results = DB::select 有效,而 DB::table 无效?
- azure-devops - Azure Devops 扩展操作
- node.js - 在 Swagger openapi v3.0.0 中,面临多个文件上传的问题
- php - PHP MYSQL 在阿拉伯语中插入数据散列
- optimization - 在 Pytorch 中执行优化时如何对变量应用边界?
- python - 通过 simple-salesforce Python 访问 Salesforce 联系人记录的 ActivityMetric 字段