时间戳

首页 > 解决方案 > 将一个数组的索引附加到另一个数组的索引

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

问题描述

我想要做的想法是，假设我有一些 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>

标签： javascripthtmlcssarrays

解决方案

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>

推荐阅读