gpt4 book ai didi

javascript - JS如何使用嵌套 map ?

转载 作者:行者123 更新时间:2023-12-03 02:44:37 25 4
gpt4 key购买 nike

这是代码,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>

最佳答案

嗯,我已经解决了。所以我要回答我自己的问题。 ;)

我尝试了另一种方法来执行 map 功能,我使用了二维数组而不是 2 个独立的数组

let groupItems = [ 
[$select('#id-1'), 'offset1'],
[$select('#id-2'), 'offset2'],
[$select('#id-3'), 'offset3']
]
groupitems.map( items => {
setTimeout( () => {
// destruct first dimensional
let [ x ] = [items];
// destruct second dimensional
let [ i, j ] = x;
// first round i = $select('#id-1'); j = 'offset2';
// second and third round so forth
sectionSwitch( i, j, 1);
}, 0 + addTime);
addTime += 1000;
})

关于javascript - JS如何使用嵌套 map ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48152107/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com