javascript - 如何将数组元素的 innerHTML 分配给另一个数组中的值？

Question

const posterTitle2 = document.getElementById('poster-2-title');
const posterTitle3 = document.getElementById('poster-3-title');
const posterTitle4 = document.getElementById('poster-4-title');

const posterTitleList = [posterTitle1, posterTitle2, posterTitle3, posterTitle4];

const titleList = ["The Last Days of American Crime", "Becky", "The Rising Hawk", "7500"];

我想将每个 posterTitle 数组元素的 innerHTML 设置为 titleList 数组中的相应值：

例如

posterTitle1.innerHTML = "美国犯罪的末日"

我只能弄清楚如何对数组中的一个元素进行操作（如下）。我知道会有一个简单的解决方案，但我就是看不到！

posterTitleList.forEach(element => element.innerHTML = titleList[0]);

标签： javascriptarraysforeachnested-loops

Answer 1

而是尝试这种方式，给所有标题相同的 className 说titles，并使用 className 来访问所有它们，如果你不打算在任何地方使用它们，你可以完全省略 id。

const titleList = ["The Last Days of American Crime", "Becky", "The Rising Hawk", "7500"]

let titles = document.getElementsByClassName('titles')

for(let i = 0; i < titles.length; i++){
    titles[i].innerHTML = titleList[i]
}

<div class="container">
    <div class="titles" id='poster-2-title'></div>
    <div class="titles" id='poster-3-title'></div>
    <div class="titles" id='poster-4-title'></div>
</div>