web-dev-qa-db-fra.com

jQuery Basculer le texte?

Est-ce que quelqu'un sait comment basculer le texte HTML d'une balise d'ancrage à l'aide de jQuery? Je veux une ancre qui clique sur le texte alternant "Afficher l’arrière-plan" et "Afficher le texte" ainsi que les fondus entrants et sortants d’une autre div. C'était ma meilleure supposition:

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

Merci d'avance.

jquerytoggle
68
mtwallet

Désolé, le problème c'est moi! le n'était pas synchronisé mais c'était parce que le texte HTML était dans le mauvais sens. Au premier clic, je veux que la div disparaisse et que le texte dise "Afficher le texte".

Va vérifier plus en profondeur la prochaine fois avant que je demande!

Mon code est maintenant:

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

Merci encore pour votre aide!

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

Basculer cache ou montre les éléments. Vous pouvez obtenir le même effet en utilisant le basculement en ayant 2 liens et en les basculant lorsque vous cliquez dessus.

115
Kyle Butt

La plus belle réponse est ... Étendez jQuery avec cette fonction ...

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

HTML:

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

Utilisation: 

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

J'ai utilisé la logique (x == b? A: b) dans le cas où le texte HTML initial est légèrement différent (un espace supplémentaire, un point, etc.) afin que vous n'ayez jamais un duplicata de la valeur initiale prévue 

(Aussi pourquoi j'ai volontairement laissé des espaces dans l'exemple HTML ;-) 

Une autre possibilité d'utilisation du basculement HTML portée à mon attention par Meules [ci-dessous] est la suivante: 

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

Utilisation: 

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

(ou quelque chose comme ça)

43
JxAxMxIxN

Améliorer et simplifier la réponse 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;
    }
});

Utilisé comme:

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

Extension pour JQuery qui ne fait que basculer du texte.

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

13
Nate-Wilkins

Pourquoi ne pas simplement les empiler ::

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

Utilisez html () pour changer le contenu HTML . Similaire au code de fflyer05 :

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

Usage:

<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

J'ai écrit ma propre petite extension pour toggleText. Cela peut être utile.

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

extension jQuery:

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

Usage: 

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

En modifiant ma réponse de votre autre question , je voudrais faire ceci:

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

Utilisez ceci

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

Voici comment vous le poursuivez 

 
   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>

Vous pouvez même utiliser le langage HTML s'il est correctement codé.

2
aWebDeveloper

Dans la plupart des cas, vous auriez un comportement plus complexe lié à votre événement click. Par exemple, un lien qui bascule la visibilité de certains éléments, auquel cas vous souhaitez échanger le texte du lien de "Afficher les détails" à "Masquer les détails" en plus d'un autre comportement. Dans ce cas, ce serait une solution privilégiée:

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

Vous pouvez l'utiliser de cette façon:

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

Vous pouvez également toggleText en utilisant toggleClass () comme une pensée.

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

Et puis utiliser

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

Fonction améliorée 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>

en utilisant:

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

Je simplifie peut-être trop le problème, mais c'est ce que j'utilise.

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

Pourquoi ne pas suivre l'état d'une classe sans règles CSS sur l'ancre cliquable

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

Ceci est une pensée en utilisant la méthode toggleClass () de jQuery.

Supposons que vous ayez un élément avec id = "play-pause" et que vous souhaitiez basculer le texte entre "play" et "pause".

0
mriiiron

ce n’est pas une façon très propre et intelligente, mais c’est très facile à comprendre et à utiliser parfois - c’est bizarre et même - booléen comme:

  var moreOrLess = 2;

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

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

});
0
Erez Lieberman