jQuery Basculer le texte?

Question

Quelqu'un sait comment faire pour basculer le texte le texte html d'une balise d'ancrage à l'aide de jQuery. Je veux un point d'ancrage qui quand on clique dessus le texte alterne entre "Montrent le Fond" & "Afficher le Texte" ainsi que la décoloration et un 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 à l'avance.

Answer 1

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

Bascule masque ou affiche les éléments. Vous pouvez obtenir le même effet en utilisant la bascule en ayant 2 liens et de basculement lorsque l'un des deux est cliqué.

Answer 2

Désolé, mais le problème, c'est moi! l'est de la synchronisation, mais c'est parce que j'ai le texte HTML à l'envers. Le premier sur je veux la div à s'estomper et le texte à dire "Afficher le Texte".

Va vérifier plus attentivement la prochaine fois avant de me demander!

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 l'aide!

Answer 3

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 de JQuery que seulement le basculement du texte.

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

Answer 4

Pourquoi ne pas simplement empiler ::

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

Answer 5

L'utilisation de l'html() pour basculer d'un contenu HTML. Semblable à fflyer05le code:

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

Utilisation:

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

Violon: http://jsfiddle.net/DmppM/