Changer le nom de l'élément après le basculement

Question

J'ai fait masquer et afficher un élément div en cliquant sur un élément

avec la classe toggleIt à l'aide de la fonction toggle (). Mais comment changer le nom de la balise p après avoir cliqué dessus?

Par exemple, j'ai le nom "Hide" pour la balise p. En cliquant dessus, je cache un div. Maintenant, je veux aussi que le nom change en 'Show'. Comment je fais ça?

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

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

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

});

Answer 1

Je pense que vous avez l'intention de modifier le texte de l'élément P par opposition à son nom.

<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

Vous devez savoir si l'élément #common_fields est visible ou non, dans l'ordre. pour obtenir la valeur de texte «Afficher» ou «Masquer» appropriée:

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

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

Essayez l'extrait de code ci-dessus ici .

Answer 3

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

Assurez-vous que c'est la seule <p> balise avec le & "toggleIt &"; classe ou vous aurez besoin d'utiliser un sélecteur différent.

Answer 4

Selon le code que vous avez posté ci-dessus, vous n'essayez pas de modifier l'attribut name, vous essayez de modifier la valeur textuelle / innerHTML de l'élément.

Cela se fait en appelant:

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

Si vous souhaitez réellement modifier l'attribut name de l'élément p, vous devez:

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