質問
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();
});
解決
名前ではなく、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");
});
他のヒント
$(".toggleIt").text("Show");
<!> quot; toggleIt <!> quot;を持つ唯一の<p>
タグであることを確認してください。または、別のセレクタを使用する必要があります。
上で投稿したコードによると、name属性を変更しようとするのではなく、要素のテキスト値/ innerHTMLを変更しようとしています。
次の呼び出しで完了します。
$('.toggleIt').click(function(){
$('#common_fields').toggle().text('Show');
});
実際にp
要素のname属性を変更したい場合は、次のようにします。
$('.toggleIt').click(function(){
$('#common_fields').toggle().attr('name', 'Show');
});
var toggleString = {
show:'Show',
hide:'Hide'
};
$('.toggleIt').toggle(function() {
$('#common_fields').hide();
$(this).text( toggleString.show );
}), function() {
$('#common_fields').show();
$(this).text( toggleString.hide );
});
所属していません StackOverflow