Modifica del nome dell'elemento dopo l'attivazione / disattivazione

Question

Ho fatto un nascondino di un elemento div, facendo clic su un

elemento con classe toggleIt usando la funzione toggle (). Ma come modificare il nome del tag p dopo averlo fatto clic?

Ad esempio, ho il nome come "Nascondi" per il tag p. Facendo clic su questo nascondo un div. Ora voglio anche che il nome cambi in "Mostra". Come posso farlo?

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

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

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

});

Answer 1

Penso che tu intenda cambiare il testo dell'elemento P in contrapposizione al suo 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

Devi sapere se l'elemento #common_fields è visibile o no, in ordine per ottenere il giusto valore di testo "Mostra" o "Nascondi":

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

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

Prova lo snippet sopra qui .

Answer 3

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

Assicurati che sia l'unico <p> tag con " toggleIt " o dovrai usare un altro selettore.

Answer 4

Secondo il codice che hai pubblicato sopra, non stai cercando di cambiare l'attributo name, stai cercando di cambiare il valore del testo / innerHTML dell'elemento.

Questo viene fatto chiamando:

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

Se davvero volessi cambiare l'attributo name dell'elemento p, dovresti farlo:

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