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

Question

クリックすると、div要素の非表示と表示を行いました。

トグル（）関数を使用して、toggleItクラスを持つ要素。しかし、クリックした後に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");

<p>それが「toggleIt」クラスの唯一のタグであることを確認してください。そうでない場合は、別のセレクターを使用する必要があります。

Answer 4

上で投稿したコードによると、名前属性を変更しようとしているのではなく、要素のテキスト値/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 );
});