Cambiar el nombre del elemento después de alternar

Question

He hecho un escondite de un elemento div, al hacer clic en un elemento

con la clase toggleIt usando la función toggle (). Pero, ¿cómo cambiar el nombre de la etiqueta p después de hacer clic en ella?

Por ejemplo, tengo el nombre como 'Ocultar' para la etiqueta p. Al hacer clic en esto, oculto un div. Ahora, también quiero que el nombre cambie a 'Mostrar'. ¿Cómo hago eso?

<p class="toggleIt">Hide</p> //want this to change to 'Show' after clicking

$('.toggleIt').click(function(){

     $('#common_fields').toggle();

});

Answer 1

Creo que tiene la intención de cambiar el texto del elemento P en lugar de su nombre.

<p class="toggleIt">Hide</p> //want this to change to 'Show' after clicking
$('.toggleIt').click(function(){
  $('#common_fields').toggle();
  var thisElem = $(this);
  thisElem.text(thisElem.text() === "Show" ? "Hide" : "Show");
});

Answer 2

Debe saber si el elemento #common_fields es visible o no, en orden para obtener el valor de texto correcto "Mostrar" u "Ocultar":

$('.toggleIt').click(function(){
  var $commonFields = $('#common_fields');
      text = $commonFields.is(':visible') ? 'Show' : 'Hide';

  $(this).text(text);
  $commonFields.toggle();
});

Pruebe el fragmento anterior aquí .

Answer 3

$(".toggleIt").text("Show");

Asegúrese de que esa sea la única etiqueta <p> con " toggleIt " clase o necesitarás usar un selector diferente.

Answer 4

Según el código que publicó anteriormente, no está intentando cambiar el atributo de nombre, está intentando cambiar el valor de texto / innerHTML del elemento.

Eso se hace llamando:

$('.toggleIt').click(function(){
     $('#common_fields').toggle().text('Show');
});

Si realmente quisiera cambiar el atributo de nombre del elemento p, haría:

$('.toggleIt').click(function(){
     $('#common_fields').toggle().attr('name', 'Show');
});

Answer 5

var toggleString = {
    show:'Show',
    hide:'Hide'
};

$('.toggleIt').toggle(function() {
    $('#common_fields').hide();
    $(this).text( toggleString.show );
}), function() {
    $('#common_fields').show();
    $(this).text( toggleString.hide );
});