javascript - 使用 jQuery 添加类仅适用于第一个元素

Question

我正在尝试使用 jQuery 在我的网站上编写 Darkmode 代码，并使用 classList.toggle 更改颜色。大多数情况下一切正常，但导航仅适用于第一个 li 和 a。这是我的代码:

HTML

<div class="fixed-darkmode">
    <div class="darkmode-definition">
        <button class="nightModeButton">darkmode</button>
    </div>


    <nav style="padding-left: 100px;">
        <ul>
            <li><a href="#">Bio</a></li>
            <li><a href="#">Galéria</a></li>
        </ul>
    </nav>

CSS

li a {
    display: inline-block;
    font-family: 'Merriweather', serif;
    font-weight: 500;
    font-size: 22px;
    text-decoration: none;
    color: #171717;
    padding: 0 30px;
}

li a:hover {
    color: #171717;
    text-decoration: none;
}

body.night-mode {
    background: #181b23;
}

li a.night-mode {
    color: #fff !important;
}

Javascript (jQuery)

var nightModeToggleButton = document.querySelector(".nightModeButton");
var body = document.querySelector("body");
var navigacka = document.querySelector("a");

nightModeToggleButton.onclick = function() {
    nightModeToggleButton.classList.toggle("night-mode");
    body.classList.toggle("night-mode");
    navigacka.classList.toggle("night-mode");
};

Answer 1

改变

li a.night-mode {
    color: #fff !important;
}

到

.night-mode li a {
  color: #fff !important;
}

给出您期望的结果。

只是一个想法:不是直接在 li 或 ul 或 a 上应用颜色修改，而是有一个名为 light-mode 的类，并嵌套与 light 关联的样式-内部模式。

var nightModeToggleButton = document.querySelector(".nightModeButton");
        var body = document.querySelector("body");
        var navigacka = document.querySelector("a");


        nightModeToggleButton.onclick = function() {
            nightModeToggleButton.classList.toggle("night-mode");
            body.classList.toggle("night-mode");
            navigacka.classList.toggle("night-mode");
        };

li a {
    display: inline-block;
    font-family: 'Merriweather', serif;
    font-weight: 500;
    font-size: 22px;
    text-decoration: none;
    color: #171717;
    padding: 0 30px;
}

li a:hover {
    color: #171717;
    text-decoration: none;
}

body.night-mode {
    background: #181b23;
}

.night-mode li a {
    color: #fff !important;
}

<div class="fixed-darkmode">
            <div class="darkmode-definition">
                        <button class="nightModeButton">darkmode</button>
            </div>

 
 <nav style="padding-left: 100px;">
                        <ul>
                            <li><a href="#">Bio</a></li>
                            <li><a href="#">Galéria</a></li>
                        </ul>
                    </nav>