JS Смена текста в кнопке

223

16 февраля 2018, 17:43

Здравствуйте!

Подскажите пожалуйста как сменить текст в кнопке при клике на неё и с последующим возвратом текста после второго нажатия.

Прошу прощения за глупый вопрос, т.к. в JS я пока не разбирался.

P.S. На сайте используется фреймворк Bootstrap 4.

<button type="button" class="btn btn-outline-success" data-toggle="collapse" data-target="#services" id="show"><span>Показать всё</span></button>

Answer 1

const btn = document.querySelector('.btn > span'); 
btn.addEventListener('click', function() { 
  btn.innerHTML = 
    (btn.innerHTML === 'Показать всё') ? btn.innerHTML = 'Скрыть всё' : btn.innerHTML = 'Показать всё'; 
})

<button type="button" class="btn btn-outline-success" data-toggle="collapse" data-target="#services" id="show"><span>Показать всё</span></button>

И второй вариант, если кнопка не первая или не единственная....

const btn = document.querySelectorAll('.btn > span'); 
for (let i = 0; i < btn.length; i++) { 
 
  btn[i].addEventListener('click', function() { 
    this.innerHTML = 
      (this.innerHTML === 'Показать всё') ? this.innerHTML = 'Скрыть всё' : this.innerHTML = 'Показать всё'; 
  }) 
 
}

<button type="button" class="btn btn-outline-success" data-toggle="collapse" data-target="#services" id="show"><span>Показать всё</span></button> 
<button type="button" class="btn btn-outline-success" data-toggle="collapse" data-target="#services" id="show_2"><span>Показать всё</span></button> 
<button type="button" class="btn btn-outline-success" data-toggle="collapse" data-target="#services" id="show_3"><span>Показать всё</span></button> 
<button type="button" class="btn btn-outline-success" data-toggle="collapse" data-target="#services" id="show_4"><span>Показать всё</span></button>

Answer 2

Ответы конечно уже даны, но пришло в голову забавное решение с jQuery :)))

$('button').click(function() 
{ 
  $('span').toggle(); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<button> 
  <span>Показать всё</span> 
  <span style="display:none">Вернуть назад</span> 
</button>

Answer 3

Подробней о text.

$("button").click(function() { 
  $(this).text(function(i, text) { 
    return text === "Показать всё" ? "Скрыть всё" : "Показать всё"; 
  }) 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button" class="btn btn-outline-success" data-toggle="collapse" data-target="#services" id="show"><span>Показать всё</span></button>