Как изменить текстовое содержимое нескольких HTML-тегов с помощью JavaScript?
Например:
<p> 1 </p>
<p> 2 </p>
<p> 3 </p>
Как видите, есть тег 3 абзаца с другим номером. Итак, с помощью JavaScript читаем содержимое тега p и изменяем текст в соответствии с содержимым, полученным из тега p.
Предположим, что первый тег p имеет содержимое 1, поэтому изменил его на "активный". Второй тег 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>
Ответы 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>вы можете создать хэш, например > var hash = { '1' : 'Активно', '2' : 'Деактивировано', '3': 'Другие' }, а затем использовать этот хэш вместо регистра переключения, например: ele.innerText = хэш[ele.innerText]
Используйте массив со значениями, которые вам нужны, для каждого абзаца преобразуйте исходное значение 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>
Большое спасибо за то, что это помогло мне лучше понять