如何修复JS中嵌套Map导致元素添加全部Offset类的问题

The core issue here is that you’re passing the entire array of offset classes to $switch for every element. When you use groupOffsets.map(x => x), it returns the full array ['offset1', 'offset2', 'offset3'], and since $addClsls uses the spread operator (...newClass), all three classes get added to each element.

Solution: Use the Index to Match Elements with Their Offset Class #

The map method provides the current element’s index as its second parameter. You can use this index to pick the exact offset class that corresponds to each element in groupElements:

// 为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) {
    // Add index parameter to the map callback
    groupElements.map( (element, index) => {
        setTimeout( () => {
            // Use the index to get the matching offset class for this element
            $switch(element, groupOffsets[index], 0)
            console.log(element)
        }, addTime );
        addTime += 1000;
    });
}

Why This Works: #

• For the first element (#id-1, index 0), we use groupOffsets[0] → offset1
• For the second element (#id-2, index 1), we use groupOffsets[1] → offset2
• For the third element (#id-3, index 2), we use groupOffsets[2] → offset3

This ensures each element only receives its intended offset class, matching your expected output.

内容的提问来源于stack exchange，提问作者Cho Lin Tsai