如何在切换到变量时保存关闭条件

Question

不确定之前是否有人问过类似的问题。 如果有请指出。

当然，我是这个领域的新手。 所以请耐心等待。

我有一个包含 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>

有人可以帮我将这些切换条件保存到不同的变量中吗？ 我真的很感激。

谢谢堆！

Answer 1

创建一个 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...

Answer 2

我添加了使用 LocalStorage 来保持开关位置

值在switchList对象内：

const switchList = 
      {​ switch_1: true
      ,​ switch_2: true
      ,​ switch_3: true ​
      , switch_4: true
      ,​ switch_5: true
      ,​ switch_6: true
      }

从输入复选框列表直接构建

你还需要一个表格！

因此，当表单元素获得任何输入更改时，通过使用事件委托，您可以在 switchList 中设置复选框值

然后将 switchList 复制到本地存储中

 const switchersF = document.querySelector('form#switchers') , memoSwitch = 'SwitchStorage' , switchList = [...switchers.querySelectorAll('input[type=checkbox]')].reduce((s,el)=>{ s[el.name]=true;return s},{}) ; initSwitchs() ; switchersF.onsubmit=e=>e.preventDefault() // disable submit form ; switchersF.oninput=e=> { if (!e.target.matches('input[type=checkbox]')) return switchList[e.target.name] = e.target.checked setSwitchsMemo() // console.log( switchList ) } function initSwitchs() { let SwitchsMemo = localStorage.getItem(memoSwitch) if (!SwitchsMemo) { setSwitchsMemo() } else { for (let [key, value] of Object.entries( JSON.parse(SwitchsMemo) )) { switchersF[key].checked = value } } } function setSwitchsMemo() { localStorage.setItem(memoSwitch, JSON.stringify(switchList) ) }

 #switchers label { position: relative; display: block; float: left; clear: both; width: 60px; height: 34px; margin: .5em 1em; } #switchers input { display: none; } #switchers span { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; } #switchers span:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } #switchers input:checked+span { background-color: #2196F3; } #switchers input:checked+span:before { transform: translateX(26px); } #switchers input:focus+span { box-shadow: 0 0 1px #2196F3; }

 <h2>Toggle Switch</h2> <form id="switchers"> <label> <input type="checkbox" checked name="switch_1"> <span></span> </label> <label> <input type="checkbox" checked name="switch_2"> <span></span> </label> <label> <input type="checkbox" checked name="switch_3"> <span></span> </label> <label> <input type="checkbox" checked name="switch_4"> <span></span> </label> <label> <input type="checkbox" checked name="switch_5"> <span></span> </label> <label> <input type="checkbox" checked name="switch_6"> <span></span> </label> </form>