时间戳

首页 > 解决方案 > javascript删除分配的最后一个类或用新类替换最后一个类

javascript - javascript删除分配的最后一个类或用新类替换最后一个类

问题描述

let addDarkColor = ["darkAqua","darkPurple","darkGreen", "darkYellow", "darkOrange", "darkRed", "darkPink"];

这是我每次运行时要替换的一组类

questionContainer.classList.add(addDarkColor[nextClicked])

这就是我目前所拥有的，只是每次都添加一个新类，但是显然它会堆叠。它正在工作，但同时，我不希望我的 questionContainer 每次单击时都有堆叠类，例如：“darkAqua”、“darkPurple”、“darkGreen”、“darkYellow”。有没有办法在添加类之前删除分配给它的最后一个类（所以我不必每次删除 WHAT 类时都指定，只指定最后一个）或者最好用我的新类替换最后分配的类. 我在任何不是 JQuery 的地方都找不到答案。我不知道或安装了 qjuery，所以请帮助使用 vanilla Javascript

标签： javascript

解决方案

也可以参考上一个类并删除

let addDarkColor = ["darkAqua","darkPurple","darkGreen", "darkYellow", "darkOrange", "darkRed", "darkPink"];

var questionContainer = document.querySelector(".test")
var nextClicked = 0
function next() {

  var prev = nextClicked - 1
  if (prev < 0) {
    prev = addDarkColor.length - 1
  }
  
  questionContainer.classList
    .add(addDarkColor[nextClicked])
  questionContainer.classList
    .remove(addDarkColor[prev])
  
  nextClicked++
  if (nextClicked >= addDarkColor.length) nextClicked = 0
}

questionContainer.addEventListener("click", next)
next()
.darkAqua { background-color: aqua }
.darkPurple  { background-color: purple }
.darkGreen  { background-color: green }
.darkYellow  { background-color: yellow }
.darkOrange  { background-color: orange }
.darkRed  { background-color: red }
.darkPink  { background-color: pink }
<div class="test">Hello</div>

如果你不知道它是什么类，你可以删除所有的类。

questionContainer.classList
  .remove(addDarkColor.join(' '))
questionContainer.classList
  .add(addDarkColor[nextClicked])

推荐阅读