Basculer le texte avec jQuery

Question

J'ai trouvé quelques articles ici sur ce sujet mais aucun ne semble répondre exactement à ce que je recherche.

Voici mon code actuel:

$(".email-slide").click(function(){ 
    $("#panel").slideToggle("slow"); 
    $(this) 
    .text("Close") 
    .toggleClass("active"); 
}); 

Lorsque je sélectionne le mot « Email » qui a la classe « email-slide » le glisse panneau haut vers le bas, et le mot « Email » devient blanc, et le mot "Email" devient le mot "Fermer".

Tout va bien jusqu'ici. Mais lorsque vous cliquez sur "Fermer" alors que la couleur et le panneau reviennent à la normale, le mot "Fermer" ne revient pas dans le mot "Email". Au lieu de .text ("Close") j'ai essayé .toggleText ("class") mais il semble que cela ne fonctionne pas. Y a-t-il quelque chose de similaire que je puisse faire pour l'accomplir en ajoutant le moins de code possible? Je vous remercie! MISE À JOUR - Je suis capable de l'accomplir en utilisant le code suivant, mais j'espérais que ce serait une façon plus efficace/plus courte de le faire. Sinon, faites le moi savoir. Merci!

$(".email-slide").click(function(){ 
    $("#panel").slideToggle("slow"); 
    $(this).toggleClass("active"); 
}); 

$(".email-slide").toggle(function(){ 
    $(this).text("Close") 
}, function(){ 
    $(this).text("Email") 
}); 

Answer 1

Vous pouvez essayer:

$(".email-slide").click(function() { 
    $("#panel").slideToggle("slow"); 

    $(this).toggleClass("active"); 

    if ($(this).text() == "Close") 
     $(this).text("Email") 
    else 
     $(this).text("Close"); 

}); 

Ou au lieu de en comparant la valeur text(), vous pouvez également tester pour $(this).hasClass("active").

H.t. :)

Answer 2

Je pense que le (ce) le vissera. Vous devrez peut-être utiliser le nom de la classe à la place :)

J'ai eu exactement la même chose l'autre jour, si vous voyez mon post: slideToggle jQuery function

Answer 3

Vous n'avez rien qui remonte le texte à 'Email'. Il n'y a pas de méthode de bascule pour le contenu. Vous devrez faire un test et définir la valeur en conséquence.

$(".email-slide").click(function(){ 
    $("#panel").slideToggle("slow"); 
    var text = $(this).text() == 'Email' ? 'Close' : 'Email'; 
    $(this) 
    .text(text) 
    .toggleClass("active"); 
}); 

Answer 4

Je pense que JQuery n'a pas de fonction toggleText. Vous devez placer manuellement le texte "Email" sur l'événement de fermeture.

$ (this) .text ("Email");

Answer 5

S'il vous plaît essayer ...

if($('.email-slide').attr('class') == 'inactive') 
{ 
    $('.email-slide').text('Email'); 
} 
else 
{ 
    $('.email-slide').text('Close'); 
} 

$('.email-slide').toggleClass('active'); 

Answer 6

C'est une méthode pour échanger du texte. C'est une approche alternative au remplacement du texte.

HTML

<div class="toggleAbout"> 
    <h2 class="toggleOff">Click</h2> 
    <h2 class="toggleOn">Close</h2> <!-- this will be hidden at first --> 
</div> 

<div class="about"> 
    <p>blah blah blah</p> 
</div> 

CSS

.toggleAbout h2.toggleOff { display: block; } 
.toggleAbout h2.toggleOn { display: none; } /* this will be hidden at first */ 
.about { display: none; } 

jQuery

$('.toggleAbout h2').click(function() 
{ 
    $('.about').slideToggle('slow', function() 
    { 
     $('.toggleAbout h2').toggle(); 
    }); 
}); 

Answer 7

peut-être un moyen facile serait:

if ($(this).text() == 'Email') 
    $(this).text("Close"); 
else 
    $(this).text("Email"); 

Answer 8

Voici un raccourci pour la réponse ci-dessus:

$(".email-slide").click(function(){ 
    $("#panel").slideToggle("slow"); 
    $(this) 
    .text(($(this).text() == 'Close' ? 'Email' : 'Close')) 
    .toggleClass("active"); 
}); 

Adam

Answer 9

Ceci est une question très ancienne MAIS:

$(".email-slide").click(function() { 
    $("#panel").slideToggle("slow"); 
    $(this).text($(this).hasClass('active')?"Email":"C‌​lose")).toggleClass(‌​'active'); 
});