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

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

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

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

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

1) 元素：数组中正在处理的current element。

2) 索引（可选）：数组中元素的index。

3) 数组（可选）：调用了array forEach()。

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>

Answer 2

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

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

如果 arrOfElements 和 arrOfClassNames 的项数相同，你可以这样做：

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