如何使用 JavaScript 更改多个 html 标签的文本内容？

Question

例如：

<p> 1 </p>
<p> 2 </p>
<p> 3 </p>

如您所见，有 3 个编号不同的段落标签。因此，使用 JavaScript 读取 p 标签的内容，并根据从 p 标签接收到的内容更改文本。

假设，第一个 p 标签的内容是 1，所以将其更改为 "active"。第二个 p 标签有内容 2 所以把它改成 "deactivated" 第三个标签包含 3 所以改成 "others".

输出看起来像：

<p> Active </p>
<p> Deactivated </p>
<p> Others </p>

即使我们将 p 标签顺序更改为：

<p> 2 </p>
<p> 3 </p>
<p> 1 </p>

输出必须是：

<p> Deactivated </p>
<p> Others </p>
<p> Active </p>

Answer 1

您可以使用 switch 和 .innerText

const pEles = [...document.querySelectorAll("p")];

pEles.forEach(ele => {
  switch (ele.innerText) {
    case "1":
      ele.innerText = "Active"
      break;
    case "2":
      ele.innerText = "Deactivated"
      break;
    case "3":
      ele.innerText = "Others";
      break;
  }
})

<p>1</p>
<p>2</p>
<p>3</p>

Answer 2

使用包含所需值的数组，将每个段落的原始文本值转换为数字，并使用该数字从数组中检索值。

或者使用某种templating。

const values = [`Active`, `Deactivated`, `Others`];
document.querySelectorAll(`p`).forEach( (p) =>
  p.textContent = values[+(p.textContent.trim()) - 1]);

<p> 1 </p>
<p> 3 </p>
<p> 2 </p>
<p> 3 </p>
<p> 1 </p>
<p> 2 </p>

如何使用 JavaScript 更改多个 html 标签的文本内容？

How to change text content of multiple html tags using JavaScript?

html

javascript

css

arrays