Javascript 为什么classList.remove不工作，而jQuery.removeClass工作？

我仍然习惯于使用纯JavaScript，并创建一组基本的方形div，在单击时可以添加和删除类。我使用的数组将添加这些类中的一个特定类。单击时，我希望在添加新类之前删除所有这些类。例如，当点击第二个方块时，“classB”将只添加到该方块中，然后点击任何其他方块将其删除

我知道

classList.remove

必须在

classList.add

之前，但由于某些原因，它不起作用。我总是收到消息“无法读取htmldevelment.elem.addEventListener中未定义的属性'remove'

但是，如果我使用jQuery。

removeClass

它就可以正常工作。但是我不想使用jQuery

这是片段。您可以看到

classList.remove

，我正在尝试注释掉的内容

const addClass=['classA'，'classB'，'classC'，'classD']；
常量数=[0,1,2,3]；
const square=document.queryselectoral（'.square'）；
正方形forEach（（元素，i）=>{
元素addEventListener（'单击'，（）=>{
//square[i].classList.remove（…addClass）
$（正方形）.removeClass（'classA classB classC classD'）；
如果（i==数字[i]）{
元素classList.add（addClass[i]）；
}
});
});
.square{
宽度：2em；
高度：2em；
背景色：黑色；
保证金：1rem；
}
.classA{背景色：红色；}
.classB{背景色：黄色；}
.classC{背景色：绿色；}
.classD{背景色：蓝色；}
您正在比较的两种方法并不相同：

square[i].classList.remove（…addClass）

将从元素中删除数组中的所有类

$（square.removeClass（'classA classB classC classD'）；

将从所有方块中删除所有这些类

要在没有jQuery的情况下完成此操作，您可以执行以下操作：

square.forEach（elem=>elem.classList.remove（…addClass））；


const addClass=['classA'，'classB'，'classC'，'classD']；
常量数=[0,1,2,3]；
const squares=document.queryselectoral（'.squares'）；
//将square重命名为squares，因此更明显的是它是一个节点列表，而不是单个节点
正方形。forEach（（elem，i）=>{
元素addEventListener（'单击'，（）=>{
squares.forEach（elem=>elem.classList.remove（…addClass））；
如果（i==数字[i]）{
元素classList.add（addClass[i]）；
}
});
});
.square{
宽度：2em；
高度：2em；
背景色：黑色；
保证金：1rem；
}
.classA{背景色：红色；}
.classB{背景色：黄色；}
.classC{背景色：绿色；}
.classD{背景色：蓝色；}

您确定要在
square
而不是
elem
上调用
classList.remove（）
？这是因为
square
是节点列表。尝试
this.classList.remove（）
。不过他们希望它出现在click事件中（我假设是基于代码）。@EternalHour是的，我用一个片段更新了我的答案。