为什么classList.remove没有工作，而jQuery .removeClass却在工作呢？
为什么classList.remove没有工作，而jQuery .removeClass却在工作呢？
提问于 2019-02-26 18:04:02
我仍然习惯于普通的JavaScript，并创建一组基本的方形div，当单击时，这些div将添加和删除类。我使用的数组将添加其中一个特定的类。单击时，我希望在添加新类之前删除所有这些类。例如，当点击第二个正方形时，'classB‘只会被添加到那个方块中，然后单击其他任何一个就会删除它。
我知道classList.remove必须在classList.add之前，但由于某种原因，它不起作用。我总是收到消息“无法读取未定义的HTMLDivElement.elem.addEventListener属性'remove‘”。
但是，如果我使用jQuery .removeClass，它的工作没有问题。但我宁愿不使用jQuery。
这是片段。您可以看到我正在尝试的classList.remove，它被注释掉了。
const addClass = ['classA','classB','classC','classD'];
const numbers = [0,1,2,3];
const square = document.querySelectorAll('.square');
square.forEach((elem, i) => {
elem.addEventListener('click', () => {
//square[i].classList.remove(...addClass)
$(square).removeClass('classA classB classC classD');
if (i == numbers[i]) {
elem.classList.add(addClass[i]);
}
});
});.square {
width: 2rem;
height: 2rem;
background-color: black;
margin: 1rem;
}
.classA { background-color: red; }
.classB { background-color: yellow; }
.classC { background-color: green; }
.classD { background-color: blue; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
我在这里和其他网站上看过很多其他的问题，但我并没有真正看到。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-02-26 18:22:42
您要比较的两个方法并不等价：
square[i].classList.remove(...addClass)将从one元素中删除数组中的所有类。
$(square).removeClass('classA classB classC classD');将从中删除所有这些类，所有都是正方形。
要在没有jQuery的情况下做到这一点，您可以这样做：
square.forEach(elem => elem.classList.remove(...addClass));
const addClass = ['classA','classB','classC','classD'];
const numbers = [0,1,2,3];
const squares = document.querySelectorAll('.square');
// renamed square to squares so it's more obvious that it is a NodeList and not a single Node
squares.forEach((elem, i) => {
elem.addEventListener('click', () => {
squares.forEach(elem => elem.classList.remove(...addClass));
if (i == numbers[i]) {
elem.classList.add(addClass[i]);
}
});
});.square {
width: 2rem;
height: 2rem;
background-color: black;
margin: 1rem;
}
.classA { background-color: red; }
.classB { background-color: yellow; }
.classC { background-color: green; }
.classD { background-color: blue; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54891567
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号