遍历段落数组并从 JavaScript 中的另一个数组添加内容

Question

我有 3 个<p>元素，我想动态更改它们。 我有数组中那些段落的值。

这是我的 HTML：

<p class="para">text xxx</p>
<p class="para">text yyy</p>
<p class="para">text zzz</p>

这是我的 JS：

var mobile = window.matchMedia("(max-width: 567px)")
let paragraphs = document.querySelectorAll('.para')
let paraText = [
  'text for mobile xxx',
  'text for mobile yyy',
  'text for mobile zzz'
]

if (mobile) {
  paragraphs.map(paragraph => {
    paragraph.innerText = '{belonging element from paraText}'
  })
}

我如何做到这一点？

Answer 1

querySelectorAll返回一个NodeList而不是一个数组，因此不会有map函数。

此外， map用于基于现有数组创建新数组，而您的用例是关于修改其他对象。 forEach在这里更合适。

相反，尝试将 NodeList 转换为 Array ：

if (mobile) {
  let paragraphsArray = [...paragraphs];
  paragraphsArray.forEach((element, i) => {
    element.innerText = paraText[i];
  })
}

或者，简单地迭代paraText代替：

if (mobile) {
  paraText.forEach((text, i) => {
    paragraphs[i].innerText = text;
  })
}

Answer 2

像这样的东西？

if (window.matchMedia("(max-width: 567px)")) {
  const paraText = [
    'text for mobile xxx',
    'text for mobile yyy',
    'text for mobile zzz'
  ];

  document.querySelectorAll('.para')
    .forEach((p, i) => p.innerText = paraText[i]);
}