Ändern des Namens des Elements nach Makeln

Question

Ich habe eine Haut und zeigt ein div-Element durchgeführt, auf einen Klick

-Element mit Klasse toggleIt durch die Knebel () Funktion. Aber wie der Name des p-Tages zu ändern, nachdem es zu klicken?

Für zB, ich habe den Namen als ‚Ausblenden‘ für den p-Tag. Beim Klicken dieses verstecke ich ein div. Nun, ich möchte auch der Name ‚Show‘ zu ändern. Wie kann ich das tun?

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

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

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

});

Answer 1

Ich glaube, Sie wollen den Text des P-Elements ändern, wie zu seinem Namen gegenüber.

<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

Sie müssen wissen, ob das #common_fields Element sichtbar oder nicht, um zu bekommen das Recht ‚Show‘ oder ‚ausblenden‘ Textwert:

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

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

Versuchen Sie das obige Snippet hier .

Answer 3

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

Stellen Sie sicher, dass das der einzige <p>-Tag mit dem „toggleIt“ Klasse oder du wirst einen anderen Wähler verwenden müssen.

Answer 4

Nach dem Code, den Sie oben geschrieben, ich bin nicht versuchen, den Namen Attribut zu ändern, Sie versuchen, den Textwert / innerHTML- des Elements zu ändern.

Das ist getan durch den Aufruf:

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

Wenn Sie tatsächlich den Namen Attribut des p Elements ändern wollen, würden Sie tun:

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