避免在JavaScript中重复添加和删除类

下面有一个javascript代码：

   myBtn.addEventListener('click', () => {
      current_candy++;
      let previous_step = current_step - 1;
      if(( current_candy > 0) && (current_candy <= stepCount)){
        previous.classList.remove("d-none");
        previous.classList.add("d-inline-block");
        step[current_candy].classList.remove("d-none");
        step[current_candy].classList.add("d-block");
        step[current_candy].classList.remove("d-block");
        step[previous_step].classList.add("d-none");
        if (current_candy == stepCount){
          submit.classList.remove("d-none");
          submit.classList.add("d-inline-block");
          next.classList.remove("d-inline-block");
          next.classList.add("d-none");
        }
      } else {
        if(current_candy > stepCount){
            form.onsubmit = () => { return true }
        }
      }
    });

myBtn.addEventListener（'click'，（）=>{
当前_candy++；
让上一步=当前步-1；
如果（（当前糖果>0）和&（当前糖果步数）{
form.onsubmit=（）=>{return true}
}
}
});

正如您所看到的，我不断地在这个程序中添加和删除类

---

有更好的方法吗？这是一种好的做法吗？

您可以使用toggle而不是add/remove类，如果添加了类，则返回true，如果删除了类，则返回false

例如：

submit.classList.toggle('d-block');

查看以下示例：

---

当前步骤和当前糖果之间的关系是什么？你能用语言告诉我们代码的作用吗？如果你使用类名来跟踪某种“状态”我不知道你的类名有什么作用，我能说的是，这是正常的做法。知道

classList.toggle

是一种方法可能会有所帮助。另外

classList.add

和

classList.remove

可以使用多个参数。我看不出添加和重新添加的意义从同一个对象中移动“d-block”类（除非您的

当前\u candy

变量之一应该是

上一个\u步骤

）。但更重要的是，还不清楚您试图实现的总体目标。在单击事件中添加/删除类当然是好的。