这是代码,console.log 部分下面是我的问题。
它在这样的标签中注销所有 3 类偏移量:
<tag id="id1" class="$offset1, $offset2, $offset3">
但我只需要这样的标签中的一类偏移量:
<tag id="id1" class="$offset1">
我该如何解决这个问题?
解释:
向 html 元素添加新类
function $addClsls(element, ...newClass) {
return element.classList.add(...newClass);
}
从 html 元素中删除类
function $rmClsls(element, ...rmClass) {
return element.classList.remove(...rmClass);
}
选择一个元素 id 或类
function $select(element) {
return document.querySelector(element);
}
从选定元素中添加或删除类的函数
function $switch(selectEle, eleClass, indexNum) {
switch (indexNum) {
case 0:
$addClsls(selectEle, eleClass);
break;
case 1:
$rmClsls(selectEle, eleClass);
break;
default:
}
}
将 3 个元素 id 放入数组中
let groupElements = [$select('#id-1'), $select('#id-2'), $select('#id-
3')];
将 3 个元素类放入数组中(无需放入 . )
let groupOffsets = ['offset1', 'offset2', 'offset3'];
设置初始化时间值
let addTime = 0;
检查是否为 true 以通过 groupElements 和 groupOffsets 映射并设置延迟时间
if (true) {
groupElements.map( i => {
setTimeout( () => {
$switch(i, groupOffsets.map( x => x ), 0)
console.log(i) // <= logs out results
}, 0 + addTime );
addTime += 1000;
});
}
目标是像这样注销:
<tag id="id-1" class="offset1"> </tag>
<tag id="id-2" class="offset2"> </tag>
<tag id="id-3" class="offset3"> </tag>
但问题是这样的:
<tag id="id-1" class="offset1,offset2,offset3"></tag>
<tag id="id-2" class="offset1,offset2,offset3"></tag>
<tag id="id-3" class="offset1,offset2,offset3"></tag>