如何在同一页面上使用两个具有相同功能的不同 css 的切换按钮? [英] How to use Two Toggle buttons on same page having same function with different css?

问题描述

我一直在努力在菜单栏和页脚页面上添加 2 个具有不同样式 (css) 的切换按钮.它们将用于夜间和黑暗模式.

I have been trying to hard to add 2 Toggle Buttons having different styles (css) on Menu Bar and footer page. They are to be used for night and dark mode.

但是当我使用

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

对于这两个按钮，只有一个有效.

for both of the buttons, only one of them works.

这是我的切换按钮测试页.

这是正在使用的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');
        }
    }

这是两个切换按钮的代码

This is the code for Two Toggle buttons

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

请帮助我解决代码问题.

Kindly help me in solving the issue with the code as well.

感谢您的帮助.

推荐答案

因为你在 <input type="checkbox" onclick="themeToggle()" id="theme-switcher">，您在其他 checkbox 中重复.所以只会获取 DOM 中的第一个 ID.

Because you are using ID in <input type="checkbox" onclick="themeToggle()" id="theme-switcher">, which you repeat in other checkbox. so only first ID in the DOM will be taken.

更改您的

到

并更新以下代码

注意:不要重复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');
    }
  }

这篇关于如何在同一页面上使用两个具有相同功能的不同 css 的切换按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！