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

Question

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

但是当我使用

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

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

这是我的Toggle Buttons Test Page.

这是正在使用的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>

请帮助我解决代码问题。

感谢您的帮助。

Answer 1

因为您在 <input type="checkbox" onclick="themeToggle()" id="theme-switcher"> 中使用了 ID，您在其他 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');
    }
  }

Answer 2

如果您使用 getElementById，它将从 dom 返回该 id 的第一次出现，并且由于两个按钮上的 id 相同，它每次都会更新第一个按钮。 相反，您可以在点击功能中排除事件对象，并分配 event.target 以获取按钮元素。

Answer 3

您不能对两个或多个 HTML 元素使用相同的 ID。此外，一旦您想在多个元素中使用此功能，我强烈建议您不要使用onclick inline。相反，您可以从您的页面获取所有切换器并为它们添加监听器：

获取页面中的所有切换器

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

对它们应用点击事件监听器

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');
  }
}

示例 sn-p

Obs.：您应该将其调整到您的代码中。我不得不评论 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">

Answer 4

首先，您不能有两个或多个具有相同 id 的元素。

要检测点击了哪个按钮，您可以像这样将事件作为参数传递给函数。

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');
            }
    }

编辑

要正确设置默认行为，您必须将class="switcher" 添加到每个按钮并执行此操作。

var tSwitchers = document.querySelectorAll('.switcher'));
let onpageLoad = localStorage.getItem("theme") || "";
tSwitchers.forEach((element) => {
    if(onpageLoad != null && onpageLoad  == 'dark-mode'){
       element.checked = true;
    } 
});