Как показать/скрыть div с переключателем на другой странице

У меня есть переключатель на странице параметров, который должен показывать/скрывать div на другой странице. С некоторой помощью здесь, в стеке, я смог структурировать этот код, но не могу заставить его работать.

Скрипка: https://jsfiddle.net/snake93/mLonrbkf/1/

  1. Я не могу показать/скрыть div
  2. Я не понимаю, как сохранить в localstorage

Я хотел бы понять, какие значения должны принимать функции кода 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>

Куда звонить setSetting?

brombeer 08.04.2022 15:43

Извините, но я новичок во всем этом, код, который вы видите, я структурировал с помощью пользователей стека. Я не очень хорошо разбираюсь в этих вещах, поэтому не могу ответить на ваш вопрос. Я пытаюсь понять, как завершить код и что не так.

Snake 08.04.2022 15:48

Первоначально рабочий код выглядел так: jsfiddle.net/snake93/rk689wqb/3 Но мне предложили работать с кодом Js, опубликованным в этом вопросе. Но я не знаю, как...

Snake 08.04.2022 15:51
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
3
64
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я скопировал то, что вы написали в вашем исходном коде в 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 следующим образом:

ФайлСсылка для скачивания
демо.htmlhttps://pastebin.com/mHWQ7564
стиль.csshttps://pastebin.com/3jzTubFR
логика.jshttps://pastebin.com/uFDrGrZx

Сохраните их на своем локальном компьютере в той же папке и убедитесь, что имена файлов точно такие, как я указал в этой таблице. Затем загрузите файл demo.html из веб-браузера.

Это немного измененная версия того, чем я поделился здесь. Его поведение полностью соответствует любому начальному условию. Я также добавил для дальнейшего обучения стратегию добавления новых пар флажков и меток на страницу программным путем.

В верхней части страницы есть кнопки для:

  • Добавить новый флажок
  • Сбросить локальное хранилище
  • Перезагрузить страницу

Там есть что переварить, если вы еще не знакомы с разработкой веб-страниц. Удачи!

Во-первых, спасибо за ответ. Вы были очень добры, я ценю это. Я делаю несколько тестов как на своем веб-сайте, так и на JsFiddle, но переключатели, похоже, не запоминают статус div. Также я не понимаю, почему здесь, в стеке, работает codenippet, в то время как тот же код не работает на Jsfiddle или на моем сайте. Однако, даже если элементы div начинают скрываться здесь, в стеке, я не знаю, действительно ли они хранятся в локальном хранилище. Однако, когда я перезапускаю страницу, они сбрасываются.

Snake 08.04.2022 17:03

проблема с localStorage заключается в том, что он привязан к источнику, откуда исходит страница. При работе с файлами cookie и чем-то подобным, привязанным к происхождению, нелегко протестировать что-либо вне этих ограничений. Если вы поместите этот код в локальный html-файл и откроете его с помощью Chrome, он обязательно сработает. Конечно, после того, как вы изменили состояние обоих флажков, только в этот момент оба состояния флажков будут сохранены в localStorage. Когда вы откроете локальную html-страницу, источник не будет привязан к stackoverflow.com или любому другому удаленному источнику.

Diego De Vita 08.04.2022 17:06

В любом случае, я не хочу, чтобы вы просто копировали и вставляли мой код. Надеюсь, вы понимаете, что он делает, и поэтому я прокомментировал каждую строку. Чтобы вы могли исправить это в соответствии с вашими предпочтениями, как только вы, наконец, поняли, в чем заключается магия.

Diego De Vita 08.04.2022 17:08

Спасибо за ответ и то, как вы прокомментировали, чтобы я понял, как изменить все по своему желанию. Должен сказать, что мой уровень знаний по Js очень низкий. Я пытаюсь внести некоторые изменения, чтобы заставить его работать, но я не могу. Я не понимаю, какие значения я могу изменить, а какие нет. Так что я очень сожалею о моем недостатке знаний, но я не могу идти дальше.

Snake 08.04.2022 18:14

Первым тестом было ввести код, как он был написан вами, но это не сработало. Просто так ничего не хранится. Затем, следуя вашим комментариям, я провел небольшое исследование в Google, чтобы понять, что делают valueStored, let, addEventListener и т. д. Позже я попытался изменить идентификаторы и некоторые другие вещи, такие как ложные и истинные значения. В итоге я ничего не понял, лол.

Snake 08.04.2022 18:15

локальное хранилище не сохранит состояние div, но сохранит состояние положения кнопок, поэтому вам нужно хранить оба данных в локальном хранилище

Asn 08.04.2022 18:44

да именно так, как я прекрасно объяснил в своем ответе. Подождите немного, и я добавлю некоторые подробности

Diego De Vita 08.04.2022 19:04

Прошу прощения, что так долго. Кстати, в конце концов я нашел время, чтобы обновить свой ответ и добавить новую версию, которая лучше справляется с любым начальным состоянием и предоставляет пользователям лучшие инструменты для дальнейших экспериментов. Я надеюсь, что вы сможете запустить демонстрацию, которой я поделился, и я желаю вам лучше изучить то, что вам все еще не хватает, чтобы понять, что там происходит в деталях.

Diego De Vita 08.04.2022 21:46

Другие вопросы по теме