jQuery - лучший способ переключения текста в функции щелчка

0

У меня есть функция щелчка, которая выглядит так:

jQuery('#phy-more').click(function() {
            // slideToggle slides open and closes address and phone number
    jQuery('.views-field-field-satellite-address').slideToggle();
    jQuery('.views-field-field-satellite-phone').slideToggle();
            // text displays "More" on page load and i want it to change to less
                // when the address and phone display then back to more when hidden
    jQuery('#phy-more').text('LESS');
});

Как вы можете видеть в моем прокомментированном коде, так как у меня есть это прямо сейчас, текст будет просто изменяться на LESS при нажатии. что было бы лучшим способом переключить его на Show More on load (по умолчанию это), а затем переключить LESS и More?

Я новичок в использовании jQuery, и любая помощь будет очень благодарна вам.

Теги:

2 ответа

2
Лучший ответ

Вы можете использовать ternary operator с помощью функции .is() и :visible селектор для достижения того, что вы хотите

Пытаться,

jQuery('#phy-more')
.text((jQuery('.views-field-field-satellite-address').is(':visible'))?'LESS':'MORE');
Поделиться
  • 0
    Это не очень хорошая идея ... При быстром нажатии на div, он покажет неправильный текст.
  • 0
    @ Karl-AndréGagnon Можем ли мы перезвонить этот фрагмент кому-нибудь из этой анимации? :)
Показать ещё 7 комментариев
0

Я сделал небольшой плагин когда-то, но не является надежным. Вы можете попробовать!

Вставьте это в свой код:

if(!$.fn.toggleText){
$.fn.toggleText = function(text1, text2){
    var objText = {};
    objText[text1] = text2;
    objText[text2] = text1;
    return this.each(function(){
        var $this = $(this);
        $this.text(objText[$.trim($this.text())]);
    })
}
}

Затем выполните:

jQuery('#phy-more').toggleText('LESS', 'MORE');
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню