我有从 w3schools 获得的代码.我需要创建 8 个开关切换按钮并为每个按钮分配一个数字并设置它们的 ID，以便稍后调用/引用它。
这是我的代码
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {display:none;}
.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: "${count}";
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);
}
</style>
</head>
<body>
<c:set scope="page" value="0" var="count"/>
<c:forEach begin="1" end="4" varStatus="loop">
<c:forEach begin="1" end="2" varStatus="loop">
<label class="switch" id="seat${count}">
<input type="checkbox">
<span class="slider"></span>
<c:set scope="page" value="${count+1}" var="count"/>
</label>
</c:forEach>
<br><br>
</c:forEach>
</body>
</html>
我尝试使用循环来设置它的标签，但它不起作用。我还尝试放置 id，正如您从下面的代码中看到的那样，但我还不确定如何调用它。
那么如何为每个按钮分配唯一的标签和 ID，以及我以后如何调用它？此页面稍后将包含在另一个页面中。提前致谢!
最佳答案
您尝试使用的示例不允许使用标签。您需要修改方法。我整理了一些东西，可以处理您需要的所有东西:
// demo to show handling of changes
var switches = document.querySelectorAll('.switch');
switches.forEach(function(item){
item.addEventListener('change', function(){
var checkbox = this.querySelector('input'),
data = checkbox.dataset;
checkbox.value = checkbox.checked ? data.on : data.off;
});
});/* ----- start demo code ----- */
body {
font-family: "Roboto";
font-size: 14px;
margin: 0;
padding: 0;
}
.switches {
margin: 20px;
}
.switches h1 {
font-size: 1.5em;
margin-bottom: 20px;
}
/* ----- end demo code ----- */
.switch {
display: inline-block;
height: 34px;
min-width: 60px;
position: relative;
vertical-align: middle;
}
.switch.disabled {
cursor: default;
opacity: 0.5;
}
.switch .slider {
background-color: #d9d9d9;
bottom: 0;
color: #fff;
cursor: pointer;
display: block;
height: 34px;
left: 0;
padding: 0 20px 0 40px;
position: relative;
right: 0;
top: 0;
transition: 0.4s;
}
.switch .slider .on,
.switch .slider .off {
line-height: 34px;
}
.switch .slider .off {
display: block;
}
.switch .slider .on {
display: none;
}
.switch .slider:before {
background-color: #fff;
bottom: 4px;
content: " ";
height: 26px;
left: 4px;
position: absolute;
transition: all 0.4s;
width: 26px;
}
.switch .slider.round {
border-radius: 34px;
}
.switch .slider.round:before {
border-radius: 50%;
}
.switch input {
display: none;
}
.switch input:focus + .slider {
box-shadow: 0 0 1px #2196f3;
}
.switch input:checked + .slider {
background-color: #2196f3;
padding: 0 40px 0 20px;
}
.switch input:checked + .slider:before {
left: auto;
right: 4px;
transition: all 0.4s;
}
.switch input:checked + .slider .on {
display: block;
}
.switch input:checked + .slider .off {
display: none;
}<div class="switches">
<h1>Simple Switches</h1>
<label class="switch">
<input type="checkbox" data-on="Yup" data-off="Nope" value="Nope">
<span class="slider round">
<span class="on">On</span>
<span class="off">Off</span>
</span>
</label>
<label class="switch">
<input type="checkbox" data-on="good" data-off="bad" value="bad">
<span class="slider round">
<span class="on">Superpowers On</span>
<span class="off">Superpowers Off</span>
</span>
</label>
<label class="switch">
<input type="checkbox" data-on="abc" data-off="def" value="def">
<span class="slider round"></span>
</label>
</div>您可以通过将上面的代码更改为
<c:forEach begin="1" end="4" varStatus="loop">
<c:forEach begin="1" end="2" varStatus="loop">
<label class="switch">
<input type="checkbox" id="seat${count}" name="seat${count}" data-on="onValue" data-off="offValue" value="offValue">
<span class="slider round">
<span class="on">On</span>
<span class="off">Off</span>
</span>
</label>
</c:forEach>
</c:forEach>
关于html - 如何为 HTML 中的每个开关分配不同的值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51778043/