切り替え後に要素の名前を変更する

Question

toggle（）関数を使用してクラスtoggleItで

要素をクリックすると、div要素の非表示と表示を行いました。 しかし、pタグをクリックした後に名前を変更するにはどうすればよいですか？

たとえば、pタグの名前を「非表示」にします。これをクリックすると、divが非表示になります。また、名前を「表示」に変更する必要があります。どうすればいいですか？

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

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

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

});

Answer 1

名前ではなく、P要素のテキストを変更するつもりだと思います。

<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

#common_fields要素が表示であるかどうかを順番に知る必要があります正しい「表示」または「非表示」のテキスト値を取得するには：

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

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

上記のスニペットこちらをお試しください。

Answer 3

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

<！> quot; toggleIt <！> quot;を持つ唯一の<p>タグであることを確認してください。または、別のセレクタを使用する必要があります。

Answer 4

上で投稿したコードによると、name属性を変更しようとするのではなく、要素のテキスト値/ innerHTMLを変更しようとしています。

次の呼び出しで完了します。

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

実際にp要素のname属性を変更したい場合は、次のようにします。

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