Ich habe diesen Code, den ich von w3schools bekomme . Ich muss 8 Schalter zum Umschalten erstellen und jedem von ihnen eine Nummer zuweisen sowie ihre ID festlegen, damit ich sie später anrufen / verweisen kann.
Hier ist mein Code
<%@ 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>
Ich habe versucht, eine Schleife zu verwenden, um das Label zu setzen, obwohl es nicht funktionierte. Ich habe auch versucht, die ID einzugeben, wie Sie im folgenden Code sehen können, aber ich bin mir noch nicht sicher, wie ich sie aufrufen soll.
Wie kann ich also jeder der Schaltflächen eine eindeutige Bezeichnung und ID zuweisen und wie kann ich sie später aufrufen? Diese Seite wird später in eine andere Seite eingefügt. Danke im Voraus!
Das Beispiel, das Sie verwenden möchten, lässt keine Labels zu. Sie müssten den Ansatz ändern. Ich habe etwas zusammengestellt, das alle Dinge handhaben sollte, die Sie brauchen:
// 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>Sie können dies anpassen, indem Sie Ihren Code oben in ändern
<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>
Dieser Artikel stammt aus dem Internet. Bitte geben Sie beim Nachdruck die Quelle an.
Bei Verstößen wenden Sie sich bitte [email protected] Löschen.
Lass mich ein paar Worte sagen