Как использовать две кнопки Toggle на одной странице, имеющие одинаковые функции с разными css? - PullRequest
1 голос
/ 14 февраля 2020

Я очень старался добавить 2 кнопки переключения, имеющие разные стили (css), на панели меню и на странице нижнего колонтитула. Они должны использоваться для ночного и темного режима.

Однако, когда я использую

onclick="themeToggle()" id="theme-switcher" 

для обеих кнопок, работает только одна из них.

Это my Страница тестирования Toggle Buttons.

Используется js:

 var tSwitcher = document.getElementById('theme-switcher');
let element = document.body;

 let onpageLoad = localStorage.getItem("theme") || "";
 if(onpageLoad != null && onpageLoad  == 'dark-mode'){
      tSwitcher.checked = true;
 } 
 element.classList.add(onpageLoad);


function themeToggle(){
      if(tSwitcher.checked){
          localStorage.setItem('theme', 'dark-mode');
            element.classList.add('dark-mode');
        } else {
          localStorage.setItem('theme', '');
            element.classList.remove('dark-mode');
        }
    }

Это код для двух кнопок Toggle


    <label class="switcher">
    <input type="checkbox" onclick="themeToggle()" id="theme-switcher">
    <div>
    <i class="fas fa-sun"></i>
    <i class="fas fa-arrow-left arrow"></i>
    <i class="fas fa-moon"></i>
    </div>
    </label> 


 <label class="switch" style="padding: 23px 0;">
<input type="checkbox" onclick="themeToggle()" id="theme-switcher">
<div>
    <span></span>
</div>

Пожалуйста, помогите мне решить проблему с кодом.

Спасибо за помощь.

Ответы [ 4 ]

2 голосов
/ 14 февраля 2020

Поскольку вы используете идентификатор в <input type="checkbox" onclick="themeToggle()" id="theme-switcher">, который вы повторяете в других checkbox. поэтому будет принят только первый идентификатор в DOM.

Измените <input type="checkbox" onclick="themeToggle()" id="theme-switcher">

на

<input type="checkbox" onclick="themeToggle()" class="theme-switcher">

и обновите приведенный ниже код

Примечание: не повторяйте ID

var tSwitcher = document.getElementsByClassName('theme-switcher');
let element = document.body;

let onpageLoad = localStorage.getItem("theme") || "";
if (onpageLoad != null && onpageLoad == 'dark-mode') {
        for(let i = 0; i<tSwitcher.length; i++){
                tSwitcher[i].checked = true;    
    }

}

if(onpageLoad) element.classList.add(onpageLoad);

Так обновите свой themeToggle() до

  function themeToggle() {
    if (event.target.checked) {
      localStorage.setItem('theme', 'dark-mode');
      element.classList.add('dark-mode');
    } else {
      localStorage.setItem('theme', '');
      element.classList.remove('dark-mode');
    }
  }
0 голосов
/ 14 февраля 2020

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

Получить все переключатели на своей странице

const switchers = document.querySelectorAll('.switcher');

Применить к ним прослушиватель событий click

switchers.forEach((element) => {
    element.addEventListener('click', (event) => {
        themeToggle(event);
    });
});

Наконец, вы должны добавить класс switcher ко всем элементам

<input type="checkbox" id="theme-switcher-1" class="switcher">
<input type="checkbox" id="theme-switcher-2" class="switcher">
<input type="checkbox" id="theme-switcher-3" class="switcher">

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

Обновление : вы должны настроить метод themeToggle () следующим образом:

function themeToggle(event){
  var tSwitcher = event.target;
  if(tSwitcher.checked){
    localStorage.setItem('theme', 'dark-mode');
    tSwitcher.classList.add('dark-mode'); // changed element to tSwitcher
    console.log('Dark mode is on');
  } else {
    localStorage.setItem('theme', '');
    tSwitcher.classList.remove('dark-mode'); // changed element to tSwitcher
    console.log('Dark mode is off');
  }
}

Пример фрагмента

Obs.: You следует настроить его в своем коде. Я должен был прокомментировать localStorage, потому что он не работал здесь.

const switchers = document.querySelectorAll('.switcher');
console.log(switchers);
switchers.forEach((element) => {
    element.addEventListener('click', (event) => {
        themeToggle(event);
    });
});
function themeToggle(event){
  var tSwitcher = event.target;
  if(tSwitcher.checked){
    //localStorage.setItem('theme', 'dark-mode');
    tSwitcher.classList.add('dark-mode');
    console.log('Dark mode is ON on ' + tSwitcher.id);
  } else {
    //localStorage.setItem('theme', '');
    tSwitcher.classList.remove('dark-mode');
    console.log('Dark mode is OFF on ' + tSwitcher.id);
  }
}
<input type="checkbox" id="theme-switcher-1" class="switcher"><br />
<input type="checkbox" id="theme-switcher-2" class="switcher"><br />
<input type="checkbox" id="theme-switcher-3" class="switcher">
0 голосов
/ 14 февраля 2020

Если вы используете getElementById, он вернет первое вхождение этого идентификатора из dom, а поскольку у вас одинаковый идентификатор на обеих кнопках, он обновляет первую кнопку каждый раз. Вместо этого вы можете исключить объект события в функции щелчка и назначить event.target, чтобы получить элемент кнопки.

0 голосов
/ 14 февраля 2020

Прежде всего, вы не можете иметь два или более элементов с одинаковым идентификатором.

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

onclick="themeToggle(event)" class="switcher" id="theme-switcher-2"

Получив событие, вы можете получить объект, который его вызвал ( В твоем случае кнопка) вот так.

    function themeToggle(event){
          var tSwitcher = event.target;
          if(tSwitcher.checked){
              localStorage.setItem('theme', 'dark-mode');
                element.classList.add('dark-mode');
            } else {
              localStorage.setItem('theme', '');
                element.classList.remove('dark-mode');
            }
    }

EDIT

Чтобы правильно настроить поведение по умолчанию, необходимо добавить class="switcher" к каждой кнопке и сделать это.

var tSwitchers = document.querySelectorAll('.switcher'));
let onpageLoad = localStorage.getItem("theme") || "";
tSwitchers.forEach((element) => {
    if(onpageLoad != null && onpageLoad  == 'dark-mode'){
       element.checked = true;
    } 
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...