it-swarm.com.de

jQuery Text umschalten?

Weiß jemand, wie der HTML-Text eines Ankertags mithilfe von jQuery umgeschaltet werden kann? Ich möchte einen Anker, der beim Klicken auf den Text zwischen "Hintergrund anzeigen" und "Text anzeigen" sowie dem Ein- und Ausblenden eines anderen Divs wechselt. Das 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();
    });
});

Danke im Voraus.

68
mtwallet

Sorry das Problem bin ich! Das war nicht synchron, aber das war, weil ich den HTML-Text falsch herum habe. Beim ersten Klick möchte ich, dass das div ausgeblendet wird und der Text "Show Text" sagt.

Werde das nächste Mal genauer prüfen, 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!

37
mtwallet
$(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 Elemente ein oder aus. Sie können den gleichen Effekt erzielen, indem Sie zwei Verknüpfungen verwenden und diese umschalten, wenn einer der beiden aktiviert wird.

115
Kyle Butt

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>

Benutzen: 

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

Ich habe die Logik (x == b? A: b) für den Fall verwendet, dass der ursprüngliche HTML-Text etwas anders ist (ein Leerzeichen, ein Punkt usw.), so dass Sie niemals eine doppelte Darstellung erhalten des beabsichtigten Ausgangswertes 

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

Eine andere Möglichkeit für die Verwendung von HTML-Toggeln, 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>

Benutzen: 

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

(oder sowas)

43
JxAxMxIxN

Verbesserung und Vereinfachung der Antwort von @ 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;
    }
});

Benutzen als:

$("#YourElementId").toggleText('After', 'Before');
22
Diego Favero
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, bei der nur Text umgeschaltet wird.

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

13
Nate-Wilkins

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( // );
});
7
var el  = $('#someSelector');    
el.text(el.text() == 'view more' ? 'view less' : 'view more');
6
Judson Terrell

Verwenden Sie html () , um den HTML-Inhalt umzuschalten . Ähnlich wie fflyer05 s Code:

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

Verwendungszweck:

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

5
Tomasz Majerski

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

Verwendungszweck: 

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

Ändern meiner Antwort von Ihrer andere Frage 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);
 });
});
2
Mottie

Benutze das

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

So verklagen Sie es 

 
   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, vorausgesetzt, es ist ordnungsgemäß kodiert

2
aWebDeveloper

In den meisten Fällen haben Sie komplexere Verhaltensweisen, die an Ihr Klickereignis gebunden sind. Zum Beispiel einen Link, der die Sichtbarkeit eines Elements umschaltet. In diesem Fall möchten Sie den Linktext zusätzlich zu anderem Verhalten von "Details anzeigen" in "Details ausblenden" austauschen. 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");
});
1
fflyer05

Sie können den Text auch umschalten, indem Sie toggleClass () als Gedanken verwenden.

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

Und dann verwenden

$(myobject).toggleClass('opened');
1
Ricky Levi

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!");
1
Yurii Rabeshko
<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);
    });

})();
1
J.Archiquette

Vielleicht verkleinere ich das Problem zu stark, aber ich verwende es.

$.fn.extend({
    toggleText: function(a, b) {
        $.trim(this.html()) == a ? this.html(b) : this.html(a);
    }
});
1
Andi
$.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");
1
RulazISC

Verfolgen Sie den Status einer Klasse ohne CSS-Regeln auf dem anklickbaren Anker selbst

$(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");
        }
    });
});
0
ortonomy
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 = "play-pause" und möchten den Text zwischen "play" und "pause" umschalten.

0
mriiiron

dies ist nicht die sehr saubere und kluge Art, aber es ist sehr leicht zu verstehen und manchmal zu benutzen - es ist wie seltsam und gerade - boolesch wie

  var moreOrLess = 2;

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

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

});
0
Erez Lieberman