如何在切換到變量時保存關閉條件

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>