Javascript 使用jquery更改单击按钮的html代码时出现问题

我有一个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 ;
                }
        });
    });

$（文档）.ready（函数（）{
$（“.addbtn”）。单击（函数（）{
var标志=真；
国际单项体育联合会（旗）{
$（“.addbtn”）.html（“”）；
$（“.add”）.animate（{height:'500}）；
flag=false；
}否则{
$（“.addbtn”）.html（“”）；
$（“.add”）.高度（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
  });
});