Такая проблема. Я при клике меняю текст. Далее при повторном клике меняю текст на старый, который заранее сохранил в textStorage. Однако при повторном клике текст возвращается без подсвеченных слов (без тега span). Подскажите из-за чего это? Как это исправить?
let el = {
text: document.querySelectorAll(".text"),
btn: document.querySelectorAll(".btn"),
container: document.querySelectorAll(".container"),
};
let textStorage = new Array(el.btn.length);
for (let i = 0; i < el.btn.length; i++) {
textStorage[i] = el.text[i].textContent;
// Исходные тексты элементов сохраняются в массиве под теми же индексами.
el.btn[i].addEventListener("click", changeBorder);
}
function changeBorder() {
let i = [].indexOf.call(el.btn, this);
// Находит индекс кликнутой кнопки среди всех остальных кнопок.
// this — ссылка на кликнутую кнопку
let selected = el.container[i].classList.toggle("selected");
el.text[i].textContent = selected ? "НОВЫЙ ТЕКСТ" : textStorage[i];
};
.container {
border: 5px solid blue;
}
.text {
background: #7e3;
margin: 0;
padding: 10px;
text-align: center;
}
.btn {
background: green;
padding: 10px;
text-align: center;
cursor: pointer;
user-select: none;
}
.selected {
border: 5px solid red;
}
.span {
color: orange;
}
<div class="container">
<p class="text">СТАРЫЙ ТЕКСТ <span class="span">ВОТ SPAN</span></p>
<div class="btn">ВЫБРАТЬ</div>
</div>
<div class="container">
<p class="text">ТЕКСТ НОМЕР ДВА <span class="span">ВОТ SPAN</span></p>
<div class="btn">ВЫБРАТЬ</div>
</div>