如何为 HTML 中的每个开关切换分配不同的值答案

【问题标题】：How to assign different value to each switch toggle in HTML如何为 HTML 中的每个开关切换分配不同的值
【发布时间】：2018-08-10 02:22:08
【问题描述】：

我有从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 以及以后如何调用它？此页面稍后将包含在另一个页面中。提前致谢！

【问题讨论】：

标签： html css jstl

【解决方案1】：

您尝试使用的示例不允许使用标签。您需要修改方法。我整理了一些东西，可以处理你需要的所有东西：

// 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>

DEMO here as well

您可以通过将上面的代码更改为来适应这一点

<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>

【讨论】：

没想到有人给了我这么复杂却很好的答案。谢谢队友