javascript - 如何在切换到变量时保存关闭条件
问题描述
不确定以前是否有人问过类似的问题。如果有请指出。
当然,我是这个领域的新手。所以请多多包涵。
我有一个包含 6 个开关的 html 网页。
我需要将这些开关的开启和关闭条件保存到不同的变量中。
开 = 1 关 = 0
例如,开关 1 的开/关条件代表 x 变量。
when on x=1 off x=0
开关 2 开/关条件代表 y 变量。
when on y=1 off y=0
我的页面浏览量如下。
我的代码:
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider {
background-color: #2196F3;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
*/
<h2>Toggle Switch</h2>
<label name="s" class="switch">
<input type="checkbox" checked>
<span class="slider"></span>
</label><br><br>
<label class="switch">
<input type="checkbox" checked>
<span class="slider"></span>
</label><br><br>
<label class="switch">
<input type="checkbox" checked>
<span class="slider"></span>
</label><br><br>
<label class="switch">
<input type="checkbox" checked>
<span class="slider"></span>
</label><br><br>
<label class="switch">
<input type="checkbox" checked>
<span class="slider"></span>
</label><br><br>
<label class="switch">
<input type="checkbox" checked>
<span class="slider"></span>
</label><br><br>
<label class="switch">
<input type="checkbox">
</label>
<label class="switch">
<input type="checkbox" checked>
</label>
有人可以帮我将这些开关条件保存到不同的变量中吗?我真的很感激。
多谢!
解决方案
创建一个 JavaScript 函数来处理开关更改:
<script type="text/JavaScript">
var switchValues = { };
function switched (switchElement) {
switchValues[switchElement.id] = switchElement.checked;
}
</script>
然后确保您的每个复选框开关都具有分配给您的新功能的唯一id
属性和处理程序:onclick
<label name="s" class="switch">
<input type="checkbox" id="switch1" onclick="switched(this)" checked>
<span class="slider"></span>
</label><br><br>
<label class="switch">
<input type="checkbox" id="switch2" onclick="switched(this)" checked>
<span class="slider"></span>
</label><br><br>
<label class="switch">
<input type="checkbox" id="switch3" onclick="switched(this)" checked>
<span class="slider"></span>
</label><br><br>
<label class="switch">
<input type="checkbox" id="switch4" onclick="switched(this)" checked>
<span class="slider"></span>
</label><br><br>
Etc...
推荐阅读
- css - 如何使我的@media 函数与设备像素比兼容
- php - 在随机 Doctrine DQL 查询中补充 DATETIME 字段
- javascript - 在 SPA(反应)中提交带有数据的 form.html?
- reactjs - 尝试从 React Web 应用程序获取数据并进入 Electron 应用程序以显示徽章计数
- jquery - Jquery 在 elecron.js 中无法正常工作
- php - Laravel - 完成后仍在内存中的作业处理方法
- java - Snackbar.setAnchorView(不工作);
- javascript - 分配失败 - JavaScript 堆内存不足
- c# - 使用“.NETFramework,Version=v4.6.1”恢复包“MyPackage 1.0.1”,自定义 nuget 包上的警告
- c - 当该函数位于另一个文件夹中的另一个 c 程序中时,如何使用 gdb ddebugger 进入该函数?