Сменить текст при нажатии

190
14 декабря 2018, 12:40

Мне надо поменять текст при нажатии, сейчас у меня нет обратного действия, чтоб при нажатии было скрыть, при втором нажатии подробнее. Заранее благодарен.

$('.link_slider_2').click(function () {
   (this).text('Скрыть');
});
Answer 1

Можно и без jquery сделать.

function changeText(ev) { 
    if(ev.getAttribute('data-show') === "true") { 
        ev.innerText = "Подробнее" 
        ev.setAttribute('data-show', "false");  
    } 
    else { 
        ev.innerText = "Скрыть" 
        ev.setAttribute('data-show', "true");  
    } 
}
<button type="button" onclick="changeText(this)" data-show="true"> 
    Скрыть 
</button>

Или с jquery:

$('.link_slider_2').click(function () { 
    if($(this).attr('data-show') === "true") { 
        $(this).text("Показать"); 
        $(this).attr('data-show', "false");  
    } 
    else { 
        $(this).text("Скрыть"); 
        $(this).attr('data-show', "true");  
    } 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<button type="button" class="link_slider_2" data-show="true"> 
    Скрыть 
</button>

Answer 2

Можно просто менять свойство элемента(объекта). свойство onclick можно использовать если знаешь что не будет больше одного слушателя события, или я не прав?

const btn = document.querySelector('.btn') 
// btn.textContent хранит стартовый текст кнопки 
const text = [btn.textContent, 'Подробнее']  
 
// вариант короче если надо давать только один обработчик клика 
btn.onclick = changeText  
 
function changeText ({ target }) { 
  /* приводит число к противоположному булевому типу и приводит к обратно числу(служит как индекс) 
   * вначале будет undefined, но это всеравно приведет к 1(строка 'Подробнее') 
   * присваивать в объект элемента проще чем к data-* атрибуту  
   */  
  target.state = +!target.state 
  // textContent быстрее. Берется текст из массива по индексу  
  target.textContent = text[target.state]  
}
<button class="btn" type="button"> 
    Скрыть 
</button>

Answer 3

Хорошая идея с dataset, можно сделать немного по другому, чтоб не харкодить в скрипт и было применимо на другие кнопки этого же класса. Записал второй вариант текста в атрибут data-label="Показать" и по клику менял их местами.

jQuery(function($) { 
   
  $('.btn').click(function() { 
    var $btn = $(this); 
    var text = $btn.text(); 
    var label = $btn.data('label'); 
     
    $btn.text(label).data('label', text); 
  }); 
   
});
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> 
 
<button type="button" data-label="Показать" class="btn"> 
  Скрыть 
</button> 
 
<button type="button" data-label="Пока" class="btn"> 
  Привет 
</button> 
 
<button type="button" data-label="Два" class="btn"> 
  Один 
</button>

READ ALSO
Отправка формы с помощью ajax, форма при этом динамически создается на сайте. native JS

Отправка формы с помощью ajax, форма при этом динамически создается на сайте. native JS

Всем доброго дняНе получается у меня реализовать отправку формы через js, форма создается при этом при клике на кнопку

166
Какие есть плагины для стилизации placeholder?

Какие есть плагины для стилизации placeholder?

Подскажите пожалуйста какой-нибудь хороший плагин для стилизации placeholderЧтобы я мог выбрать input's в которых нужно заменить placeholder на кастомизированный...

137
выборка из двух таблиц mysql по user_id

выборка из двух таблиц mysql по user_id

есть две таблицы users и messagesв users есть столбцы name и id_user

136
UPDATE по результатам SELECT

UPDATE по результатам SELECT

Есть 3 связанные таблицы

126