如何在不同頁面中顯示/隱藏帶有切換的div

Question

我在選項頁面上進行了切換，應該在另一頁上顯示/隱藏 div。 在堆棧上的一些幫助下，我能夠構建這段代碼，但我無法讓它工作。

小提琴： https://jsfiddle.net/snake93/mLonrbkf/1/

1. 我無法顯示/隱藏 div
2. 我不明白如何保存在本地存儲中

我想了解 Js 代碼的功能必須承擔什么價值。 誰能幫我？

 function setSetting(name,value){ window.localStorage.setItem(name,true); } function getSetting(name){ return window.localStorage.getItem(name); } const div = document.querySelector("label-ck1"); if(getSetting("show")){ div.style.display = "block"; } else{ div.style.display = "none"; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <label class="switch"> <input type="checkbox" id="ck1"> <span class="slider round hide-off"></span> </label> <br><br> <label class="switch"> <input type="checkbox" id="ck2"> <span class="slider round hide-off"></span> </label> <br><br> <div class="hideme" id="label-ck1">Please hide me...</div> <div class="hideme" id="label-ck2">Please hide me...</div>

Answer 1

我使用我在那里找到的相同 css 復制了你在jsfiddle中的原始代碼中編寫的內容。 然后我只是重寫了 javascript 部分。

它所做的是將更改事件處理程序附加到頁面上找到的任何復選框，以便當它們的 state 發生更改時，相應的 label 會顯示或隱藏。 對應的 label 是使用帶有前綴label-的復選框 id 找到的。

在那種情況下，更改的復選框的 state 被推送到 localStorage 中。 一開始，頁面首先檢查是否為找到的每個復選框保存了 state，如果有，其 state 會相應更新。

在 Firefox localStorage方法(getItem/setItem)中返回SecurityError: The operation is insecure 。 我可以在專用的 html 頁面上運行該代碼以驗證它是否正常工作（肯定是在 Chrome 上）。 所以一開始為了避免任何問題，我在 js 代碼之上添加了一個 securityFlag。 當該標志設置為 true 時，localStorage 根本不會被使用，這樣您就可以在此處看到沒有錯誤的預覽。

 //if set to true, any operation involving localStorage will be excluded let securityFlag = true; /** * Initialize the Checkboxes state according to what's stored on localStorage */ function initCheckboxStateBasedOnLocalStorage(){ //for each of the checkboxes on the page document.querySelectorAll('input[type="checkbox"]').forEach( (checkbox, i) => { //if securityFlag is true, skip the operation if(securityFlag) return; //retrieves the value stored in localStorage paired to the id passed let valueStored = window.localStorage.getItem(checkbox.id); //if valueStored is set if(valueStored == 'true' || valueStored == 'false') //sets the checkbox value with what was retrieved from localStorage checkbox.checked = valueStored == 'true'? true: false; }); } /** * Will hide/show the label corresponding to checkbox and will save its value on localStorage * It will be registered as the handler of the change event of every checkbox in the page */ function onCheckBoxStateChange(){ let checkbox = event.target; //guesses the id of the label dedicated to the checkbox triggering the event let msgContainer = document.getElementById(`label-${checkbox.id}`); //if this checkbox is checked, if (checkbox.checked){ //show the corresponding label msgContainer.style.display = "block"; //if securityFlag is true, skip the operation if(securityFlag) return; //sets the state in localStorage for this.id window.localStorage.setItem(checkbox.id,true); } //otherwise else{ //hide the corresponding label msgContainer.style.display = "none"; //if securityFlag is true, skip the operation if(securityFlag) return; //sets the state in localStorage for this.id window.localStorage.setItem(checkbox.id,false); } } //When the document has been loaded document.addEventListener("DOMContentLoaded", function() { //for each of the checkboxes on the page document.querySelectorAll('input[type="checkbox"]').forEach( (checkbox, i) => { //attach an handler to the event change checkbox.addEventListener("change", onCheckBoxStateChange ); }); }); //reflect the value of checkboxed according to what's stored on localStorage initCheckboxStateBasedOnLocalStorage();

 .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%; } /*END OF TOGGLE SWITCH*/.hideme { padding:20px; background: blue; color: white; font-weight: 800; text-align: center; }

 <p>checkbox1</p> <label class="switch"> <input type="checkbox" id="ck1"> <span class="slider round hide-off"></span> </label> <br><br> <p>checkbox2</p> <label class="switch"> <input type="checkbox" id="ck2"> <span class="slider round hide-off"></span> </label> <br><br> <div class="hideme" id="label-ck1">Label bound to checkbox1</div> <div class="hideme" id="label-ck2">Label bound to checkbox2</div>

如果您需要開箱即用的完全可行的解決方案，我在 pastebin 上上傳了一組文件：

文件	下載鏈接
演示.html	https://pastebin.com/mHWQ7564
樣式.css	https://pastebin.com/3jzTubFR
邏輯.js	https://pastebin.com/uFDrGrZx

將它們保存在本地計算機上的同一文件夾內，並確保文件名與我在該表中列出的完全一致。 然后從您的 web 瀏覽器加載文件 demo.html。

這是我在這里分享的內容的略微修改版本。 它的行為與任何初始條件完全一致。 為了進一步教育，我還添加了一個策略，以編程方式向頁面添加新的復選框標簽對。

頁面頂部有按鈕：

• 添加一個新復選框
• 重置本地存儲
• 重新加載頁面

如果您還不熟悉開發 web 頁面，那么這里有很多東西需要消化。 祝你好運！