Как сделать смену текста через toggle?

Question

[S P]

Помогите, как правильно смену текста при нажатии на кнопку и обратно?

Песочница: https://jsfiddle.net/sp_true/6bca4xgf/

Comments

[Вадим]

ну смотрите на наличие класса перед вызовом реплэйса.
Если класс - в одну сторону, нет - в другую(переставьте элементы в Ваших массивах местами).

Answer 1

[Stalker_RED]

Вариант №1: в разметке спаны с обоими вариантами, меняем им display.


Вариант №2: в разметке span с дата-атрибутами


Вариант №3: замена textContent'а скриптом


Вы бы описали подробнее что вы пытаетесь сделать. Редактор какой-то? contenteditable пробовали прикрутить?

Comments

[S P]

Спасибо большое за развернутый ответ, то что надо) подошел 3 вариант. Последний вопрос, как добавить изменяемым строкам класс? И если таких блоков несколько, как для каждого отдельно менять?

[Stalker_RED]

Сергей Пономарёв, currNode.classList.add('foo')

Про "блоков несколько" не понял, опишите подробнее, а лучше соберите фиддл.

[S P]

Если у меня будет несколько таких же блоков: https://jsfiddle.net/sp_true/9v370gby/

[Stalker_RED]

Сергей Пономарёв, было бы неплохо как-то эти блоки различать.
например добавлю data-key родительскому контейнеру.

[S P]

Stalker_RED, Спасибо) выручили, а внутри он всегда будет переписывать span.active?

Если конструкция будет такая

<span class="active"> Текст
    <span class="variable">Доп. текст</span>
</span>

То он приведет к виду <span class="active">Текст Доп.текст</span>

[Stalker_RED]

Сергей Пономарёв, ну, там же textContent заменяется. Если грязно и быстро, то можно в innerHTML замену делать, но нужно понимать какие проблемы или косяки это может принести. Или дополнительные проверки делать.