我想做的想法是，假設我有一些 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>uj5u.com熱心網友回復：
如果 arrOfElements 和 arrOfClassNames 的專案數相同，則可以執行以下操作：
function addClassName(arrOfElements, arrOfClassNames) {
// Here is what ive tested
arrOfElements.forEach((el, index) => {
el.classList.add(arrOfClassNames[index]);
});
}
uj5u.com熱心網友回復：
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>uj5u.com熱心網友回復：
您可以簡單地使用陣列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>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/329255.html
標籤：javascript html css 数组