risposta-alla-domanda-sullo-sviluppo-web-bd.com

jQuery Attiva/disattiva il testo?

Qualcuno sa come commutare il testo html di un tag di ancoraggio usando jQuery. Voglio un'ancora che quando si fa clic il testo si alterna tra "Mostra sfondo" e "Mostra testo" oltre a sbiadire dentro e fuori un altro div. Questa è stata la mia ipotesi migliore:

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

Grazie in anticipo.

68
mtwallet

Scusa, il problema sono io! era fuori sincrono, ma questo perché avevo il testo HTML nel modo sbagliato. Al primo clic voglio che il div diventi sfumato e il testo che dice "Mostra testo".

Controlleremo più approfonditamente la prossima volta prima che lo chieda!

Il mio codice è ora:

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

Grazie ancora per l'aiuto!

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

Attiva/disattiva nasconde o mostra elementi. È possibile ottenere lo stesso effetto usando la levetta avendo 2 collegamenti e attivandoli quando si fa clic su uno di essi.

115
Kyle Butt

La risposta più bella è ... Estendi jQuery con questa funzione ...

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

HTML:

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

Uso: 

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

Ho usato la logica (x == b? A: b) nel caso in cui il testo HTML iniziale sia leggermente diverso (uno spazio, un periodo, ecc ...) in modo tale da non mostrare mai un duplicato del valore iniziale previsto 

(Anche perché ho volutamente lasciato degli spazi nell'esempio HTML ;-) 

Un'altra possibilità per l'uso di levette HTML portata alla mia attenzione da Meules [in basso] è:

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

Uso: 

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

(o qualcosa del genere)

43
JxAxMxIxN

Migliorare e semplificare la risposta di @ 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;
    }
});

Usare come:

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

Estensione per JQuery che esegue solo la commutazione del testo.

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

13
Nate-Wilkins

Perché non li impili semplicemente ::

$("#clickedItem").click(function(){
  $("#animatedItem").animate( // );
}).toggle( // <--- you just stack the toggle function here ...
function(){
  $(this).text( // );
},
function(){
  $(this).text( // );
});
7
Eugene Koekemoer
var el  = $('#someSelector');    
el.text(el.text() == 'view more' ? 'view less' : 'view more');
6
Judson Terrell

Usa html () per attivare il contenuto HTML . Simile al codice di 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>

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

5
Tomasz Majerski

Ho scritto la mia piccola estensione per toggleText. Potrebbe tornare utile.

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

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

Modificando la mia risposta dalla tua altra domanda , farei questo:

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

Usa questo

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

Ecco come lo denunci 

 
   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>

Puoi anche usare html a condizione che sia codificato in html correttamente

2
aWebDeveloper

Nella maggior parte dei casi si avrebbe un comportamento più complesso legato all'evento click. Ad esempio un collegamento che attiva la visibilità di alcuni elementi, nel qual caso si vorrebbe scambiare il testo del collegamento da "Mostra dettagli" a "Nascondi dettagli" oltre ad altri comportamenti. In tal caso, questa sarebbe una soluzione preferita:

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

Potresti usarlo in questo modo:

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

Puoi anche commutare il testo usando toggleClass () come un pensiero ..

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

E poi usare

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

La funzione migliorata di 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>

utilizzando:

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

Forse sto semplificando eccessivamente il problema, ma questo è quello che uso.

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

Perché non tenere traccia dello stato di attraverso una classe senza regole CSS sull'ancora cliccabile stessa

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

Questo è un pensiero usando il metodo toggleClass () di jQuery.

Supponiamo di avere un elemento con id = "play-pause" e si desidera alternare il testo tra "play" e "pause".

0
mriiiron

questo non è il modo molto pulito e intelligente, ma è molto facile da capire e utilizzare somtimes - è come strano e persino - booleano come:

  var moreOrLess = 2;

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

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

});
0
Erez Lieberman