jQuery Text umschalten?

Wie kann ich den HTML-Text eines Ankertags mit jQuery umschalten? Ich möchte einen Anker , dass , wenn zwischen dem Text wechselt geklickt Show Background& Show Textsowie Verblassen in & out andere div. Dies war meine beste Vermutung:

$(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");
});

Schaltet das Ausblenden oder Anzeigen von Elementen ein. Sie können den gleichen Effekt mit dem Umschalten erzielen, indem Sie zwei Links verwenden und diese umschalten, wenn Sie auf einen der beiden klicken.

Die schönste Antwort ist ... Erweitern Sie jQuery mit dieser Funktion ...

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

HTML:

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

Verwenden:

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

Ich habe die Logik (x == b? A: b) für den Fall verwendet, dass der anfängliche HTML-Text geringfügig abweicht (ein zusätzliches Leerzeichen, ein zusätzlicher Punkt usw.), sodass Sie nie eine doppelte Darstellung des erhalten vorgesehener Anfangswert

(Auch warum ich absichtlich Leerzeichen im HTML-Beispiel gelassen habe ;-)

Eine andere Möglichkeit für die Verwendung von HTML-Umschaltern, auf die Meules [unten] aufmerksam gemacht hat, ist:

$.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>

Verwenden:

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

(oder so ähnlich)

Entschuldigung, das Problem bin ich! Das war nicht synchron, aber das lag daran, dass ich den HTML-Text falsch herum habe. Beim ersten Klick soll das div ausgeblendet werden und der Text "Text anzeigen" sagen.

Werde das nächste Mal gründlicher nachsehen, bevor ich frage!

Mein Code ist jetzt:

$(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();
  });
});

Nochmals vielen Dank für die Hilfe!

Die Antwort von @ Nate verbessern und vereinfachen:

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;
    }
});

Benutzen als:

$("#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");

Erweiterung für JQuery, die nur das Umschalten von Text ermöglicht.

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

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

Warum stapeln Sie sie nicht einfach ::

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

Verwenden Sie html (), um HTML-Inhalte umzuschalten. Ähnlich dem Code von fflyer05 :

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

Verwendung:

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

Geige: http://jsfiddle.net/DmppM/

Ich habe meine eigene kleine Erweiterung für toggleText geschrieben. Es kann nützlich sein.

Geige: https://jsfiddle.net/b5u14L5o/

jQuery-Erweiterung:

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

Verwendung:

...
<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 -------

Benutze das

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

Hier ist, wie Sie es verklagen

 
   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>

Sie können sogar HTML verwenden, sofern es ordnungsgemäß codiert ist

Wenn ich meine Antwort von Ihrer anderen Frage ändere , würde ich Folgendes tun:

$(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);
 });
});

In den meisten Fällen haben Sie ein komplexeres Verhalten, das an Ihr Klickereignis gebunden ist. Beispiel: Ein Link, der die Sichtbarkeit eines Elements umschaltet. In diesem Fall möchten Sie den Linktext zusätzlich zu anderen Verhaltensweisen von "Details anzeigen" in "Details ausblenden" tauschen. In diesem Fall wäre dies eine bevorzugte Lösung:

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

Sie könnten es so verwenden:

$(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);
    });

})();

Vielleicht vereinfache ich das Problem zu stark, aber das ist es, was ich benutze.

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

Nate-Wilkins 'verbesserte Funktion:

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>

mit:

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

Sie können toegleText auch verwenden, indem Sie toggleClass () als Gedanken verwenden.

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

Und dann benutzen

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

Dies ist nicht die sehr saubere und kluge Art, aber es ist sehr einfach zu verstehen und manchmal zu verwenden - es ist wie ungerade und gerade - boolesch wie:

  var moreOrLess = 2;

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

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

});

Verfolgen Sie den Status einer Klasse ohne CSS-Regeln für den anklickbaren Anker

$(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");

Dies ist ein Gedanke, der die toggleClass () -Methode von jQuery verwendet.

Angenommen, Sie haben ein Element mit id = "Wiedergabepause" und möchten den Text zwischen "Wiedergabe" und "Pause" umschalten.