Alterar o nome do elemento após toggling

Question

Eu tenho feito um esconderijo e demonstração de um elemento div, em clicar em um

elemento com classe toggleIt usando a função de alternância (). Mas como mudar o nome da tag p após clicar nele?

Por exemplo, eu tenho o nome como 'Hide' para a tag p. Ao clicar isso eu esconder um div. Agora, eu também quero o nome para mudar para 'Show'. Como posso fazer isso?

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

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

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

});

Answer 1

Eu acho que você pretende mudar o texto do elemento P em oposição ao seu nome.

<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

Você precisa saber se o elemento #common_fields é visível ou não, a fim de obter o direito 'Show' ou 'Hide' valor de texto:

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

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

Experimente o acima trecho aqui .

Answer 3

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

Certifique-se de que essa é a tag só <p> com a classe "toggleIt" ou você vai precisar usar um seletor diferente.

Answer 4

De acordo com o código que você postou acima, você não está tentando mudar o atributo de nome, você está tentando alterar o valor text / innerHTML do elemento.

Isso é feito chamando:

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

Se você realmente queria mudar o atributo nome do elemento p, você faria:

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