Мне надо поменять текст при нажатии, сейчас у меня нет обратного действия, чтоб при нажатии было скрыть, при втором нажатии подробнее. Заранее благодарен.
$('.link_slider_2').click(function () {
(this).text('Скрыть');
});
Можно и без 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>
Можно просто менять свойство элемента(объекта). свойство 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>
Хорошая идея с 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>
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Всем доброго дняНе получается у меня реализовать отправку формы через js, форма создается при этом при клике на кнопку
Подскажите пожалуйста какой-нибудь хороший плагин для стилизации placeholderЧтобы я мог выбрать input's в которых нужно заменить placeholder на кастомизированный...
есть две таблицы users и messagesв users есть столбцы name и id_user