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

Question

例如：

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

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

假设，第一个 p 标签的内容为1 ，因此将其更改为"active" 。 第二个 p 标签的内容为2 ，因此将其更改为“已停用” ，而第三个标签包含3 ，因此将其更改为“其他” 。

输出看起来像：

<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

使用具有所需值的数组，对于每个段落，将原始 textValue 转换为数字，并使用该数字从数组中检索值。

或者使用某种 模板。

 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>

Answer 2

您可以使用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>