JQuery Переключить изменение текста

Ответ 1

Вы можете использовать метод утверждения is(), чтобы проверить, открыта или закрыта панель в обратном вызове анимации и соответственно настроен текст. http://jsfiddle.net/9EFNK/7/

$('.open').click(function(){
    var link = $(this);
    $('.showpanel').slideToggle('slow', function() {
        if ($(this).is(':visible')) {
             link.text('close');                
        } else {
             link.text('open');                
        }        
    });       
});

Ответ 2

Просто добавьте простой оператор if, чтобы протестировать текст так:

$('.open').click(function(){

       $('.showpanel').slideToggle('slow');
       if($(this).text() == 'close'){
           $(this).text('Show');
       } else {
           $(this).text('close');
       }
});

Подобно DEMO

Ответ 3

Не самый красивый метод, но он выполняет задание в одном выражении.

$(this).text(($(this).text() == 'Close') ? 'Show' : 'Close');

Ответ 4

Здесь обновленная версия http://jsfiddle.net/9EFNK/1/

Вы можете просто переключить класс по закрытию/открытию, выполнить проверку для этого класса и соответствующим образом изменить содержащийся текст.

if( $(this).hasClass('active') )
  $(this).text('open');
else
  $(this).text('Show');

$(this).toggleClass('active');

Ответ 5

Используйте .toggle()

Вот Рабочее демо

$('.open').click(function(){    
        $('.showpanel').slideToggle('slow');                  
    }).toggle(function() {
            $(this).text('Hide');
        }, function() {
            $(this).text('Show');
        });

Ответ 6

проверить, что это может быть вопрос пользователя. Fiddle

Ответ 7

попробуйте эту демонстрацию

$(document).ready(function(){
$('.open').toggle(function(){    
        $('.showpanel').slideToggle('slow');
        $(this).text('close');
}, function(){
    $('.showpanel').slideToggle('slow');
    $(this).text('Show');
});

    $('.open2').toggle(function(){

        $('.showpanel2').slideToggle('slow');
        $(this).text('close');
    }, function(){
        $('.showpanel2').slideToggle('slow');
        $(this).text('Show');
    });   
});​

Ответ 8

Используйте этот

jQuery.fn.toggleText = function() {
    var altText = this.data("alt-text");
    if (altText) {
        this.data("alt-text", this.html());
        this.html(altText);
    }
};

Вот как вы его используете

 
   jQuery.fn.toggleText = function() {
    	var altText = this.data("alt-text");

    	if (altText) {
    		this.data("alt-text", this.html());
    		this.html(altText);
    	}
    };

    $('[data-toggle="offcanvas"]').click(function ()  {

    	$(this).toggleText();
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<button data-toggle="offcanvas" data-alt-text="Close">Open</button>