将一个数组的索引附加到另一个数组的索引上

Question

我想做的是，假设我有一些DOM元素，我想创建一个接受2个数组的函数，一个用于元素，另一个用于类名。例如，我如何确保索引为0的元素只具有我在另一个数组的索引为0处传递的类名。

这是我想要做的视觉效果

function addClassName(arrOfElements, arrOfClassNames) {
// Here is what ive tested
arrOfElements.forEach((el) => {
el.classList.add(arrOfClassNames);
});
}

预期的结果

addClassName([el1, el2], ["class-for-el1", "class-for-el2"]
console.log(el1.classList);
// Result: "class-for-el1"
console.log(el2.classList);
// Result: "class-for-el2"

<div class="class-for-el1"></div>
<div class="class-for-el2"></div>

我得到了什么

console.log(el1.classList);
// Result: "class-for-el1", "class-for-el2"
console.log(el2.classList);
// Result: "class-for-el2", "class-for-el2"

<div class="class-for-el1 class-for-el2"></div>
<div class="class-for-el1 class-for-el2"></div>

Answer 1

如果arrOfElements和arrOfClassNames的项数相同，则可以执行如下操作:

function addClassName(arrOfElements, arrOfClassNames) {
// Here is what ive tested
arrOfElements.forEach((el, index) => {
el.classList.add(arrOfClassNames[index]);
});
}

Answer 2

Array.prototype.forEach()callback给你两个参数，第一个是元素本身，第二个是它的索引，你可以使用这个属性来实现你想要的，像这样

const el1 = document.getElementById('1'),
el2 = document.getElementById('2');
function addClassName(arrOfElements, arrOfClassNames) {
arrOfElements.forEach((el, index) => {
el.classList.add(arrOfClassNames[index]);
});
}
addClassName([el1, el2], ['test', 'test1']);
console.log(`class for el1 - ${el1.className}n`);
console.log(`class for el2 - ${el2.className}`);

<div id="1"></div>
<div id="2"></div>

Answer 3

您可以简单地使用数组index获取类名并添加它

el.classList.add(arrOfClassNames[i]);

注意:有3个参数传递给回调函数

1)元素:array中正在处理的current element。

2) index(可选):数组中元素的index

3) array(可选):调用arrayforEach()

function addClassName(arrOfElements, arrOfClassNames) {
// Here is what ive tested
arrOfElements.forEach((el, i) => {
el.classList.add(arrOfClassNames[i]);
});
}
const [el1, el2] = document.querySelectorAll("div");
addClassName([el1, el2], ["class-for-el1", "class-for-el2"]);
console.log(el1.classList);
// Result: "class-for-el1"
console.log(el2.classList);
// Result: "class-for-el2"

<div>First</div>
<div> second </div>