我可以找到使用 jQuery 的示例，但找不到如何在纯 JavaScript 中执行此操作的答案。是否可以使用 JavaScript 将这两个类循环组合起来以简化代码。我将为我正在进行的项目完成大约 20 节课。var srtClass1 = document.getElementsByClassName('class1');for(var i = 0; i < srtClass1.length; i++) { srtClass1[i].classList.add('newClass'); srtClass1[i].classList.remove('class1');}var srtClass2 = document.getElementsByClassName('class2');for(var i = 0; i < srtClass2.length; i++) { srtClass2[i].classList.add('newClass'); srtClass2[i].classList.remove('class2');}
3 回答
慕尼黑8549860
TA贡献1818条经验 获得超11个赞
你可以尝试这样的事情。您只需要用要删除的所有类填充数组。
var classes = ['.class1', '.class2', '.class3'];
var elements = document.querySelectorAll(classes.join(','));
for (let element of elements) {
element.classList.add('newClass');
for (let className in classes) {
element.classList.remove(className);
}
}
.box {
display: block;
width: 100%;
height: 20px;
margin: 0 0 20px 0;
}
.class1 { background: red; }
.class2 { background: green; }
.class3 { background: blue; }
.newClass { background: yellow; }
<div class="box class1"></div>
<div class="box class2"></div>
<div class="box class3"></div>
慕工程0101907
TA贡献1887条经验 获得超5个赞
您可以合并 2 个集合：
var srtClass1 = [...document.getElementsByClassName('class1'), ...document.getElementsByClassName('class2')];
for(var i = 0; i < srtClass1.length; i++) {
srtClass1[i].classList.add('newClass');
srtClass1[i].classList.remove('class1');
srtClass1[i].classList.remove('class2');
}
你可以使用高阶函数：
[...document.getElementsByClassName('class1'), ...document.getElementsByClassName('class2')].forEach( el => {
el.classList.add('newClass');
el.classList.remove('class1');
el.classList.remove('class2');
});
甚至更好（因为classList.remove支持多个参数）：
[...document.getElementsByClassName('class1'), ...document.getElementsByClassName('class2')].forEach( el => {
el.classList.add('newClass');
el.classList.remove('class1', 'class2');
});
或者，如果您愿意，可以使用querySelectorAll：
document.querySelectorAll('.class1, .class2').forEach(el => {
el.classList.add('newClass');
el.classList.remove('class1', 'class2');
});
牛魔王的故事
TA贡献1830条经验 获得超3个赞
也许尝试制作一个类列表，然后迭代它：
function changeClasses() {
let classNames = ['class1', 'class2'];
classNames.forEach(className => {
const node = document.querySelector(`.${className}`);
if (node != null) {
node.classList.add('newClass');
node.classList.remove(className);
}
});
}
.class1 {
color: green;
}
.class2 {
color: blue;
}
.newClass {
color: red;
}
<body>
<div class="class1">class1</div>
<div class="class2">class2</div>
<button onclick="changeClasses()">Change classes</button>
</body>
没有找到匹配的内容？试试慕课网站内搜索吧
添加回答
举报
0/150
提交
取消