它没有一个一个地切换到一个主题，而是以 'solar' 主题结束并且没有改变。有什么问题？

Question

这是代码-

const bodyClassList = document.body.classList;
const bodyClass = document.body.className;
const themes = ["light", "solar", "dark"];

themeBtn.addEventListener('click', () => {
   themes.forEach(theme => {
      bodyClassList.replace(bodyClass, theme);  
   })
   
   theme = document.body.className;
   console.log(theme);
})

它没有一个一个地切换到一个主题，而是以 'solar' 主题结束并且没有改变。有什么问题吗？

Answer 1

我没有完全理解您的任务，但我认为您需要为 body 标签的多种背景颜色 class 切换。

我给你举了一个使用 switch 运算符在 class 之间切换的示例，以及来自 themes[...] 数组的 class 索引计数器。

接下来，我清理 classList:

bodyClassList.classList = '';

并添加具有适当索引的 class：

bodyClassList.classList.add(themes[index]);

这样的结果有必要吗？

const bodyClassList = document.body;
const themes = ["light", "solar", "dark"];
const themeBtn = document.querySelector('.themeBtn');
let index = 0;

themeBtn.addEventListener('click', () => {

  switch (index) {
    case 0:
      index = 1;
      break;
    case 1:
      index = 2;
      break;
    case 2:
      index = 0;
      break;
  } 
  
  bodyClassList.classList = '';
  bodyClassList.classList.add(themes[index]);  
  
})

body {
  background-color: white;
}

.light {
  background-color: lightgrey;
}

.solar {
  background-color: yellow;
}

.dark {
  background-color: black;
}

<button class="themeBtn">theme</button>

它没有一个一个地切换到一个主题，而是以 'solar' 主题结束并且没有改变。有什么问题？

Instead of switching to a theme one by one it ends up on the 'solar' theme and doesn't change. What's the problem?

html

javascript

themes

web