为什么我的按钮图标不会随着我的点击功能而改变？

Question

我是 JavaScript 新手。 为什么我的按钮不会从太阳颜色变为月亮颜色并且其他工作正常，只是不会改变图标。

 let menu = document.querySelector('#menu-icon'); let navbar = document.querySelector('.nav-menu'); menu.onclick = () => { menu.classList.toggle('fa-xmark'); navbar.classList.toggle('active'); }; let themeButton = document.getElementById('theme-button'); themeButton.onclick = () => { themeButton.classList.toggle('fa-moon'); if (themeButton.classList.contains('fa-moon')) { document.body.classList.add('active'); } else { document.body.classList.remove('active'); } };

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <div class="nav-right"> <div><i class="fa-solid fa-bars" id="menu-icon"></i></div> <div><i class="fa-solid fa-sun" id="theme-button"></i></div> </div>

Answer 1

代码正在切换类，图标没有切换，因为您有两个类fa-sun和fa-moon正在争夺相同的 CSS 属性。 规则的顺序/特殊性必须使它如此fa-sun获胜。 而在你的另一个类中，你添加的类获胜。

您不应该依赖样式表中类的顺序，因此您应该切换两个类。

 let menu = document.querySelector('#menu-icon'); let navbar = document.querySelector('.nav-menu'); menu.onclick = () => { menu.classList.toggle('fa-xmark'); menu.classList.toggle('fa-bars'); // navbar.classList.toggle('active'); }; let themeButton = document.getElementById('theme-button'); themeButton.onclick = () => { themeButton.classList.toggle('fa-moon'); themeButton.classList.toggle('fa-sun'); if (themeButton.classList.contains('fa-moon')) { document.body.classList.add('active'); } else { document.body.classList.remove('active'); } };

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <div class="nav-right"> <div><i class="fa-solid fa-bars" id="menu-icon"></i></div> <div><i class="fa-solid fa-sun" id="theme-button"></i></div> </div>

Answer 2

您正在单击添加/删除fa-moon类。 但是您还需要同时删除/添加fa-sun类。 如果两个类名都存在，则将使用具有更高特异性的类。

 themeButton.onclick = () => {
  //This will remove `fa-moon` class if it's already there, add if not.
  themeButton.classList.toggle('fa-moon');
  //You need to do the same for `fa-sun` class. Otherwise, the class never gets removed
  themeButton.classList.toggle('fa-sun');

  if (themeButton.classList.contains('fa-moon')) {
    document.body.classList.add('active');
  } else {
    document.body.classList.remove('active');
  }
};

Answer 3

只需在body元素上切换 CSS 类（如.is-darkMode或.is-menuOpen ）。
使用::before伪中的适当图标的十六进制代码更改您的 Fa 图标：

 const el = (sel, par) => (par||document).querySelector(sel); const elBody = el("body"); const toggleDarkMode = () => elBody.classList.toggle("is-darkMode"); const toggleMenuOpen = () => elBody.classList.toggle("is-menuOpen"); el("#theme-btn").addEventListener("click", toggleDarkMode); el("#menu-icon").addEventListener("click", toggleMenuOpen);

 /* DEFAULT STYLES (LIGHT MODE) */ body { background: #eee; transition: background 0.4s, color 0.4s; } #menu-nav { display: none; } /* DARK MODE STYLES: */ .is-darkMode { background: #444; color: #fff; } .is-darkMode #theme-btn::before { content: "\f186"; } /* Moon icon */ /* MENU OPEN STYLES: */ .is-menuOpen #menu-nav { display: block; } .is-menuOpen #menu-icon::before { content: "\f00d"; } /* × icon */

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"> <div class="nav-right"> <div><i class="fa-solid fa-sun" id="theme-btn"></i></div> <div><i class="fa-solid fa-bars" id="menu-icon"></i></div> </div> <div id="menu-nav">MENU GOES HERE</div>