JQuery Toggle Text?

Hoe te schakelen HTML-tekst van een ankerlabel met jQuery? Ik wil een anker die wanneer op de tekst klikte, wisselt wisselt tussen Show Background& AMP; Show TextEvenals vervagen in & amp; een andere div. Dit was mijn beste gok:

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

Antwoord 1, Autoriteit 100%

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

Schakel de huiden in of toont elementen. U kunt hetzelfde effect bereiken met behulp van toggle door 2 links te hebben en ze te schakelen wanneer er ofwel klikt.

Antwoord 2, Autoriteit 51%

Het mooiste antwoord is …
Verleng jQuery met deze functie …

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

HTML:

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

Gebruik:

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

Ik heb de logica ( x == b ? a : b ) gebruikt in het geval dat de oorspronkelijke HTML-tekst iets anders is (een extra spatie, punt, enz…), zodat u nooit krijg een duplicaat van de beoogde beginwaarde

(Ook waarom ik met opzet spaties heb gelaten in het HTML-voorbeeld 😉

Een andere mogelijkheid voor het gebruik van HTML-toggle die onder mijn aandacht is gebracht door Meules [hieronder] is:

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

Gebruik:

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

(of zoiets)

Antwoord 3, autoriteit 29%

Sorry, ik ben het probleem! het was niet gesynchroniseerd, maar dit was omdat ik de HTML-tekst verkeerd om had. Bij de eerste klik wil ik dat de div verdwijnt en dat de tekst “Toon tekst” zegt.

Zal de volgende keer grondiger controleren voordat ik het vraag!

Mijn code is nu:

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

Nogmaals bedankt voor de hulp!

Antwoord 4, autoriteit 20%

Het antwoord van @Nate verbeteren en vereenvoudigen:

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

Gebruik als:

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

Antwoord 5, autoriteit 12%

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

Extensie voor JQuery waarmee alleen tekst kan worden omgeschakeld.

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

Antwoord 6, autoriteit 10%

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

Antwoord 7, autoriteit 5%

Waarom stapel je ze niet gewoon ::

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

Antwoord 8, autoriteit 5%

Gebruik html()om HTML-inhoud in te schakelen.
Gelijk aan fflyer05‘s code:

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

Gebruik:

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

Fiddle: http://jsfiddle.net/DmppM/

Antwoord 9, autoriteit 3%

Ik heb mijn eigen kleine extensie geschreven voor toggleText. Het kan van pas komen.

Fiddle: https://jsfiddle.net/b5u14L5o/

jQuery-extensie:

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

Gebruik:

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

Antwoord 10, autoriteit 2%

Gebruik dit

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

Zo klaag je het aan

Antwoord 11, autoriteit 2%

Als ik mijn antwoord van uw andere vraagaanpas, zou ik dit doen:

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

Antwoord 12

In de meeste gevallen zou je meer complexe gedrag gekoppeld aan uw gebeurtenis click. Bijvoorbeeld een link die de zichtbaarheid van een element, in welk geval u zou willen swap linktekst van “Show Details” op “Verbergen gegevens” in aanvulling op ander gedrag schakelt. In dat geval zou dit een voorkeursoplossing zijn:

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

Je zou kunnen gebruiken op deze manier:

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

Antwoord 13

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

Antwoord 14

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

Antwoord 15

Misschien ben ik te simpel het probleem, maar dit is wat ik gebruik.

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

Antwoord 16

De verbeterde functie van 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>

Gebruik:

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

Antwoord 17

U kunt ook togklinfstekst door TOGLESCLASS () als gedachte te gebruiken.

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

en gebruik vervolgens

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

Antwoord 18

Dit is niet de zeer schone en slimme manier, maar het is heel gemakkelijk om soms te begrijpen en te gebruiken – het is net vreemd en zelfs – Boolean zoals:

 var moreOrLess = 2;
  $('.Btn').on('click',function(){
     if(moreOrLess % 2 == 0){
        $(this).text('text1');
        moreOrLess ++ ;
     }else{
        $(this).text('more'); 
        moreOrLess ++ ;
     }
});

Antwoord 19

Waarom niet bijhouden van de status van via een klasse zonder CSS-regels op het klikbare anker zelf

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

Antwoord 20

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

Dit is een gedachte die de jQuery-methode toggleClass() gebruikt.

Stel dat je een element hebt met id=”play-pause” en je wilt de tekst wisselen tussen “play” en “pause”.