Как изменить текст кнопки по клику?

Question

[Dunno2018]

Здравствуйте.
Пример кода - необходимо, чтобы при клике на кнопку на ней менялся текст на "Закрыть", а при повторном нажатии возвращался в исходный. Сейчас при повторном нажатии текст сдваивается, как это исправить?

Answer 1

[0xD34F]

Сохранять исходный текст каждой кнопки отдельно:

$('.price_tabs-content button').click(function() {
  const $this = $(this);
  const on = $this.siblings('p').toggleClass('on').hasClass('on');
  $this.text(on ? 'Закрыть' : $this.data('text'));
}).each((i, n) => $(n).data('text', $(n).text()));

https://jsfiddle.net/vs6m5hL0/

Или, можно не менять надпись на кнопке, а добавить вторую кнопку, и переключать видимость обеих:

$('.price_tabs-content button').click(function() {
  $(this).hide().next().show().end().prev().addClass('on');
}).after('<button>Закрыть</button>').next().hide().click(function() {
  $(this).hide().prev().show().prev().removeClass('on');
});

https://jsfiddle.net/vs6m5hL0/1/

Answer 2

[Banan44]

Вы выбрали обе кнопки и получили 2 текста.
Выберите по очереди, например так:

// первая
var tabsBtnText = $('.price_tabs-content button:eq(0)').text()
// вторая
var tabsBtnText2 = $('.price_tabs-content button:eq(1)').text()

Answer 3

[nikita_falcon]

Думаю можно просто добавить переменную и условие, грубо говоря
если условие верно, то условие выполняется (меняется текст на закрыть) и увеличиваешь переменную, в обратном случае, уменьшаешь переменную.

Answer 4

[SaNFeeD]

<button class="some-class" id="button" data-trigger="false" data-text="Открыть меню">Открыть меню</button>
<div style="display:none;" id="menu" class="some-class">Какое-то меню</div>

const button = document.getElementById('button');
const menu = document.getElementById('menu');

button.addEventListener('click', () =>{
    if(button.dataset.trigger == 'false'){
        button.innerText = 'Закртыть';
        menu.style.display = 'block';
        button.dataset.trigger = true;
    }else{
        button.innerText = button.dataset.text;
        menu.style.display = 'none';
        button.dataset.trigger = false;
    }
});

Answer 5

[Лев Забудкин]

Меняйте просто innerText