私はhtmlにボタンがあります：
<button class="addbtn"><i class="fas fa-plus-circle"></i></button>
クリック時にボタンのHTMLコード（アイコン）を変更したい。新しいhtmlコードは次のとおりです。
<button class="addbtn"><i class="fas fa-times-circle"></i></button>
そして、ボタンをクリックするたびに別のアイコンに切り替えたいです。だから私はこのコードを使用しました：
$(document).ready(function(){
$(".addbtn").click(function(){
var flag = true ;
if(flag){
$(".addbtn").html("<button class='addbtn'><i class='fas fa-times-circle'></i></button>");
$(".add").animate({height:'500'});
flag = false ;
} else {
$(".addbtn").html("<button class='addbtn'><i class='fas fa-plus-circle'></i></button>");
$(".add").height(60);
flag = true ;
}
});
});
ただし、前のhtmlクラス「addbtn」は変更されません。前のクラスの子として別の「addbtn」クラスが追加されます。
新しいクラスを追加せずに、現在のhtmlコードを変更するにはどうすればよいですか？
あなたはこれを少し複雑にしすぎています。関連するクラスをtoggleClass()。で切り替える必要があります。要素のHTMLを書き直したり、グローバルフラグを使用したりする必要はありません。これを試して：
$(".addbtn").click(function() {
var $el = $(this).find('i').toggleClass('fa-plus-circle fa-times-circle');
$(".add").animate({
height: $el.hasClass('fa-times-circle') ? 500 : 60
});
});
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加