У меня есть переключатель на странице параметров, который должен показывать/скрывать div на другой странице. С некоторой помощью здесь, в стеке, я смог структурировать этот код, но не могу заставить его работать.
Скрипка: https://jsfiddle.net/snake93/mLonrbkf/1/
Я хотел бы понять, какие значения должны принимать функции кода 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>
Извините, но я новичок во всем этом, код, который вы видите, я структурировал с помощью пользователей стека. Я не очень хорошо разбираюсь в этих вещах, поэтому не могу ответить на ваш вопрос. Я пытаюсь понять, как завершить код и что не так.
Первоначально рабочий код выглядел так: jsfiddle.net/snake93/rk689wqb/3 Но мне предложили работать с кодом Js, опубликованным в этом вопросе. Но я не знаю, как...
Я скопировал то, что вы написали в вашем исходном коде в jsfiddle, используя тот же css, который я нашел там. Затем я просто переписал часть javascript.
Что он делает, так это прикрепляет обработчик события изменения к любому флажку, найденному на странице, чтобы при изменении их состояния отображалась или скрывалась соответствующая метка. Соответствующая метка находится по идентификатору флажка с префиксом label-
.
В этом случае измененное состояние флажка помещается в localStorage. В самом начале страница сначала проверяет, сохранено ли какое-либо состояние для каждого из найденных флажков, и, если оно есть, его состояние обновляется соответствующим образом.
В Firefox localStorage
методы (getItem/setItem)
возвращают SecurityError: The operation is insecure
. Я мог бы запустить этот код на специальной html-странице, чтобы убедиться, что он работает правильно (в Chrome точно). Поэтому, чтобы сначала избежать каких-либо проблем, я добавил securityFlag поверх кода js. Когда для этого флага установлено значение 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 |
Сохраните их на своем локальном компьютере в той же папке и убедитесь, что имена файлов точно такие, как я указал в этой таблице. Затем загрузите файл demo.html из веб-браузера.
Это немного измененная версия того, чем я поделился здесь. Его поведение полностью соответствует любому начальному условию. Я также добавил для дальнейшего обучения стратегию добавления новых пар флажков и меток на страницу программным путем.
В верхней части страницы есть кнопки для:
Там есть что переварить, если вы еще не знакомы с разработкой веб-страниц. Удачи!
Во-первых, спасибо за ответ. Вы были очень добры, я ценю это. Я делаю несколько тестов как на своем веб-сайте, так и на JsFiddle, но переключатели, похоже, не запоминают статус div. Также я не понимаю, почему здесь, в стеке, работает codenippet, в то время как тот же код не работает на Jsfiddle или на моем сайте. Однако, даже если элементы div начинают скрываться здесь, в стеке, я не знаю, действительно ли они хранятся в локальном хранилище. Однако, когда я перезапускаю страницу, они сбрасываются.
проблема с localStorage заключается в том, что он привязан к источнику, откуда исходит страница. При работе с файлами cookie и чем-то подобным, привязанным к происхождению, нелегко протестировать что-либо вне этих ограничений. Если вы поместите этот код в локальный html-файл и откроете его с помощью Chrome, он обязательно сработает. Конечно, после того, как вы изменили состояние обоих флажков, только в этот момент оба состояния флажков будут сохранены в localStorage. Когда вы откроете локальную html-страницу, источник не будет привязан к stackoverflow.com или любому другому удаленному источнику.
В любом случае, я не хочу, чтобы вы просто копировали и вставляли мой код. Надеюсь, вы понимаете, что он делает, и поэтому я прокомментировал каждую строку. Чтобы вы могли исправить это в соответствии с вашими предпочтениями, как только вы, наконец, поняли, в чем заключается магия.
Спасибо за ответ и то, как вы прокомментировали, чтобы я понял, как изменить все по своему желанию. Должен сказать, что мой уровень знаний по Js очень низкий. Я пытаюсь внести некоторые изменения, чтобы заставить его работать, но я не могу. Я не понимаю, какие значения я могу изменить, а какие нет. Так что я очень сожалею о моем недостатке знаний, но я не могу идти дальше.
Первым тестом было ввести код, как он был написан вами, но это не сработало. Просто так ничего не хранится. Затем, следуя вашим комментариям, я провел небольшое исследование в Google, чтобы понять, что делают valueStored, let, addEventListener и т. д. Позже я попытался изменить идентификаторы и некоторые другие вещи, такие как ложные и истинные значения. В итоге я ничего не понял, лол.
локальное хранилище не сохранит состояние div, но сохранит состояние положения кнопок, поэтому вам нужно хранить оба данных в локальном хранилище
да именно так, как я прекрасно объяснил в своем ответе. Подождите немного, и я добавлю некоторые подробности
Прошу прощения, что так долго. Кстати, в конце концов я нашел время, чтобы обновить свой ответ и добавить новую версию, которая лучше справляется с любым начальным состоянием и предоставляет пользователям лучшие инструменты для дальнейших экспериментов. Я надеюсь, что вы сможете запустить демонстрацию, которой я поделился, и я желаю вам лучше изучить то, что вам все еще не хватает, чтобы понять, что там происходит в деталях.
Куда звонить
setSetting
?