通过特定类名称选择所有元素并使用切换来更改类名称

Question

期望的结果

我希望能够动态选择类名为“input”的所有元素，并利用切换将所述类名更改为“input-dm”。这是一个切换按钮，可将网页从浅色模式主题更改为深色模式主题。我使用切换是因为我希望该选项可以根据用户的想法打开和关闭。任何帮助和指出正确的方向将不胜感激。感谢您抽出时间。

当前结果

这是我目前所拥有的有效方法。这是漫长而漫长的，我知道必须有一种更简单、更动态的方法来做到这一点。同样在这个版本中，我通过 id 来识别元素。但是，我宁愿利用类来标识元素，因为类是相同的，而 ID 应该是唯一的。

<script type="text/javascript" src="/js/jquery-3.7.1.min.js"></script>
function darkmode() {
     document.getElementById("lastname").classList.toggle("input-darkmode");
     document.getElementById("firstname").classList.toggle("input-darkmode");
     document.getElementById("middle").classList.toggle("input-darkmode");
     document.getElementById("date").classList.toggle("input-darkmode");
     document.getElementById("email").classList.toggle("input-darkmode");
     document.getElementById("phone").classList.toggle("input-darkmode");
     document.getElementById("travel-start-date").classList.toggle("input-darkmode");
     document.getElementById("travel-end-date").classList.toggle("input-darkmode");
     document.getElementById("travel_loc").classList.toggle("input-darkmode");
}

复选框调用函数

Dark Mode:&nbsp;<label class="switch"><input onclick="darkmode()" type="checkbox" checked><span class="slider round"></span></label>

以下是一些失败的尝试，不幸的是没有成功。

document.getElementByClassName("input").classList.toggle("input-darkmode");

var elements = document.getElementsByClassName('input');
for(var i = 0; i < elements.length; i++){
     ([elements]).classlist.toggle("input-darkmode");
}

Answer 1

这段代码的作用...

• 将所有输入收集到一个变量/常量中
• 为每个输入添加一个事件监听器
• 该事件然后检查输入是否具有“暗模式”类别
• 如果这样做，则会将其删除
• 如果没有，则会添加它

希望这有帮助。

function toggleDarkMode(){
    const inputs = document.querySelectorAll("input");
    inputs.forEach((input) => {
        input.addEventListener("click", () => {
            inputs.forEach((el) => {
                if (el.classList.contains("dark-mode"){
                    el.classList.remove("dark-mode")
                } else {
                    el.classList.add("dark-mode")
                }
            })
        })
    }
}
toggleDarkMode();