时间戳

首页 > 解决方案 > 如何在同一页面上使用具有相同功能和不同 CSS 的两个切换按钮？

javascript - 如何在同一页面上使用具有相同功能和不同 CSS 的两个切换按钮？

问题描述

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

但是，当我使用

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

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

这是我的切换按钮测试页面。

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

这是两个切换按钮的代码


    <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>

请帮助我解决代码问题。

谢谢您的帮助。

标签： javascripthtmlcssweb

解决方案

因为您在 中使用 ID <input type="checkbox" onclick="themeToggle()" id="theme-switcher">，所以在 other 中重复checkbox。所以只会采用 DOM 中的第一个 ID。

改变你的<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');
    }
  }

推荐阅读