Alternar texto con jQuery

Question

He encontrado algunos artículos aquí sobre este tema, pero ninguno parece responder exactamente lo que estoy buscando.

Aquí está mi código actual:

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

Cuando selecciono la palabra "Enviar" que tiene la clase "email-slide" el panel superior se desliza hacia abajo, y la palabra "Enviar" se convierte en blanco, y la palabra "Correo electrónico" se convierte en la palabra "Cerrar".

Todo bien hasta ahora. Pero al hacer clic en "Cerrar", aunque el color y el panel vuelven a la normalidad, la palabra "Cerrar" no vuelve a la palabra "Correo electrónico". En lugar de .text ("Cerrar") probé .toggleText ("clase") pero parece que no funciona. ¿Hay algo similar que pueda hacer para lograrlo agregando la menor cantidad de código posible? ¡Gracias!

ACTUALIZACIÓN - Puedo lograrlo usando el siguiente código, pero esperaba que fuera una forma más eficiente/más corta de hacerlo. Si no, házmelo saber. ¡Gracias!

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

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

Answer 1

Usted podría intentar:

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

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

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

}); 

O en lugar de comparando el valor de text(), también puede probar $(this).hasClass("active").

H.t.h. :)

Answer 2

Creo que (esto) está jodiendo. Puede que tenga que utilizar el nombre de la clase en lugar :)

que tenía exactamente la misma cosa, el otro día, si ves mi post: slideToggle jQuery function

Answer 3

No tiene nada que restablezca el texto a 'Correo electrónico'. No hay un método de alternar para el contenido. Tendrá que hacer una prueba y establecer el valor en consecuencia.

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

Answer 4

Creo que JQuery no tiene función toggleText. Debe colocar manualmente el texto "Correo electrónico" allí al cerrar el evento.

$ (this) .text ("Correo electrónico");

Answer 5

Por favor, intente esto ...

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

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

Answer 6

Este es un método para intercambiar texto. Es un enfoque alternativo para reemplazar el texto.

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

tal vez una manera fácil sería:

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

Answer 8

Aquí es una forma abreviada de la respuesta anterior:

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

Adam

Answer 9

Ésta es una pregunta muy viejo pero:

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