jQuery Alternar texto?

¿Cómo alternar el texto HTML de una etiqueta de anclaje usando jQuery? Quiero un ancla que cuando se hace clic en el texto se alterna entre Show Backgroundy Show Text, así como también se desvanece dentro y fuera de otro div. Esta fue mi mejor suposición:

$(function() {
    $("#show-background").click(function () {
        $("#content-area").animate({opacity: 'toggle'}, 'slow'); 
    });

    $("#show-background").toggle(function (){
        $(this).text("Show Background")
        .stop();
    }, function(){
        $(this).text("Show Text")
        .stop();
    });
});

$(function() {
    $("#show-background").click(function () {
        $("#content-area").animate({opacity: 'toggle'}, 'slow'); 
    });

    var text = $('#show-background').text();
    $('#show-background').text(
        text == "Show Background" ? "Show Text" : "Show Background");
});

Alternar oculta o muestra elementos. Puede lograr el mismo efecto usando alternar al tener 2 enlaces y alternarlos cuando se hace clic en cualquiera de ellos.

La respuesta más hermosa es ... Extienda jQuery con esta función ...

$.fn.extend({
    toggleText: function(a, b){
        return this.text(this.text() == b ? a : b);
    }
});

HTML:

<button class="example"> Initial </button>

Utilizar:

$(".example").toggleText('Initial', 'Secondary');

He usado la lógica (x == b? A: b) en el caso de que el texto HTML inicial sea ligeramente diferente (un espacio extra, punto, etc.) por lo que nunca obtendrá una visualización duplicada del valor inicial previsto

(También por qué dejé espacios a propósito en el ejemplo HTML ;-)

Otra posibilidad para el uso de alternancia HTML que Meules me llamó la atención [abajo] es:

$.fn.extend({
        toggleHtml: function(a, b){
            return this.html(this.html() == b ? a : b);
        }
    });

HTML:

<div>John Doe was an unknown.<button id='readmore_john_doe'> Read More... </button></div>

Utilizar:

$("readmore_john_doe").click($.toggleHtml(
    'Read More...', 
    'Until they found his real name was <strong>Doe John</strong>.')
);

(o algo como esto)

¡Lo siento, el problema soy yo! el no estaba sincronizado, pero esto se debió a que tengo el texto HTML al revés. En el primer clic, quiero que el div se desvanezca y el texto diga "Mostrar texto".

¡Lo comprobaré más a fondo la próxima vez antes de preguntar!

Mi código es ahora:

$(function() {
  $("#show-background").toggle(function (){
    $("#content-area").animate({opacity: '0'}, 'slow')
    $("#show-background").text("Show Text")
      .stop();
  }, function(){
    $("#content-area").animate({opacity: '1'}, 'slow')
    $("#show-background").text("Show Background")
      .stop();
  });
});

¡Gracias de nuevo por la ayuda!

Mejorando y simplificando la respuesta de @ Nate:

jQuery.fn.extend({
    toggleText: function (a, b){
        var that = this;
            if (that.text() != a && that.text() != b){
                that.text(a);
            }
            else
            if (that.text() == a){
                that.text(b);
            }
            else
            if (that.text() == b){
                that.text(a);
            }
        return this;
    }
});

Usar como:

$("#YourElementId").toggleText('After', 'Before');

jQuery.fn.extend({
        toggleText: function (a, b){
            var isClicked = false;
            var that = this;
            this.click(function (){
                if (isClicked) { that.text(a); isClicked = false; }
                else { that.text(b); isClicked = true; }
            });
            return this;
        }
    });

$('#someElement').toggleText("hello", "goodbye");

Extensión para JQuery que solo alterna el texto.

JSFiddle: http://jsfiddle.net/NKuhV/

var el  = $('#someSelector');    
el.text(el.text() == 'view more' ? 'view less' : 'view more');

¿Por qué no los apilas?

$("#clickedItem").click(function(){
  $("#animatedItem").animate( // );
}).toggle( // <--- you just stack the toggle function here ...
function(){
  $(this).text( // );
},
function(){
  $(this).text( // );
});

Utilice html () para alternar el contenido HTML. Similar al código de fflyer05 :

$.fn.extend({
    toggleText:function(a,b){
        if(this.html()==a){this.html(b)}
        else{this.html(a)}
    }
});

Uso:

<a href="#" onclick='$(this).toggleText("<strong>I got toggled!</strong>","<u>Toggle me again!</u>")'><i>Toggle me!</i></a>

Violín: http://jsfiddle.net/DmppM/

He escrito mi propia pequeña extensión para toggleText. Puede ser útil.

Violín: https://jsfiddle.net/b5u14L5o/

Extensión jQuery:

jQuery.fn.extend({
    toggleText: function(stateOne, stateTwo) {
        return this.each(function() {
            stateTwo = stateTwo || '';
            $(this).text() !== stateTwo && stateOne ? $(this).text(stateTwo)
                                                    : $(this).text(stateOne);
        });  
    }
});

Uso:

...
<button>Unknown</button>
...
//------- BEGIN e.g. 1 -------
//Initial button text is: 'Unknown'
$('button').on('click', function() {
    $(this).toggleText('Show', 'Hide'); // Hide, Show, Hide ... and so on.
});
//------- END e.g. 1 -------

//------- BEGIN e.g. 2 -------
//Initial button text is: 'Unknown'
$('button').on('click', function() {
    $(this).toggleText('Unknown', 'Hide'); // Hide, Unknown, Hide ...
});
//------- END e.g. 2 -------

//------- BEGIN e.g. 3 -------
//Initial button text is: 'Unknown'
$('button').on('click', function() {
    $(this).toggleText(); // Unknown, Unknown, Unknown ...
});
//------- END e.g.3 -------

//------- BEGIN e.g.4 -------
//Initial button text is: 'Unknown'
$('button').on('click', function() {
    $(this).toggleText('Show'); // '', Show, '' ...
});
//------- END e.g.4 -------

Utilizar este

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

Así es como lo demanda

 
   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>

Incluso puede usar html siempre que esté codificado correctamente en html

Modificando mi respuesta de su otra pregunta , haría esto:

$(function() {
 $("#show-background").click(function () {
  var c = $("#content-area");
  var o = (c.css('opacity') == 0) ? 1 : 0;
  var t = (o==1) ? 'Show Background' : 'Show Text';
  c.animate({opacity: o}, 'slow');
  $(this).text(t);
 });
});

En la mayoría de los casos, tendría un comportamiento más complejo vinculado a su evento de clic. Por ejemplo, un enlace que alterna la visibilidad de algún elemento, en cuyo caso querrá cambiar el texto del enlace de "Mostrar detalles" a "Ocultar detalles" además de otro comportamiento. En ese caso, esta sería una solución preferida:

$.fn.extend({
  toggleText: function (a, b){
    if (this.text() == a){ this.text(b); }
    else { this.text(a) }
  }
);

Podrías usarlo de esta manera:

$(document).on('click', '.toggle-details', function(e){
  e.preventDefault();
  //other things happening
  $(this).toggleText("Show Details", "Hide Details");
});

$.fn.toggleText = function(a){
    var ab = a.split(/\s+/);
    return this.each(function(){
        this._txIdx = this._txIdx!=undefined ? ++this._txIdx : 0;
        this._txIdx = this._txIdx<ab.length ? this._txIdx : 0; 
        $(this).text(ab[this._txIdx]);
    }); 
}; 
$('div').toggleText("Hello Word");

<h2 id="changeText" class="mainText"> Main Text </h2>

(function() {
    var mainText = $('.mainText').text(),
        altText = 'Alt Text';

    $('#changeText').on('click', function(){
        $(this).toggleClass('altText');
        $('.mainText').text(mainText);
        $('.altText').text(altText);
    });

})();

Quizás estoy simplificando demasiado el problema, pero esto es lo que uso.

$.fn.extend({
    toggleText: function(a, b) {
        $.trim(this.html()) == a ? this.html(b) : this.html(a);
    }
});

Función mejorada de Nate-Wilkins:

jQuery.fn.extend({
    toggleText: function (a, b) {
        var toggle = false, that = this;
        this.on('click', function () {
            that.text((toggle = !toggle) ? b : a);
        });
        return this;
    }
});

html:

<button class="button-toggle-text">Hello World</button>

utilizando:

$('.button-toggle-text').toggleText("Hello World", "Bye!");

También puede toggleText usando toggleClass () como un pensamiento ..

.myclass::after {
 content: 'more';
}
.myclass.opened::after {
 content: 'less';
}

Y luego usa

$(myobject).toggleClass('opened');

esta no es la forma muy limpia e inteligente, pero es muy fácil de entender y usar algunas veces - es como par e impar - booleano como:

  var moreOrLess = 2;

  $('.Btn').on('click',function(){

     if(moreOrLess % 2 == 0){
        $(this).text('text1');
        moreOrLess ++ ;
     }else{
        $(this).text('more'); 
        moreOrLess ++ ;
     }

});

¿Por qué no realizar un seguimiento del estado de una clase sin reglas CSS en el ancla en la que se puede hacer clic?

$(function() {
    $("#show-background").click(function () {
        $("#content-area").animate({opacity: 'toggle'}, 'slow');
        $("#show-background").toggleClass("clicked");
        if ( $("#show-background").hasClass("clicked") ) {
            $(this).text("Show Text");
        }
        else {
            $(this).text("Show Background");
        }
    });
});

var jPlayPause = $("#play-pause");
jPlayPause.text(jPlayPause.hasClass("playing") ? "play" : "pause");
jPlayPause.toggleClass("playing");

Esta es una idea que usa el método toggleClass () de jQuery.

Suponga que tiene un elemento con id = "play-pause" y desea alternar el texto entre "play" y "pause".