javascript - 使用 jquery 更改单击按钮的 html 代码时遇到问题

Question

我在 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 代码，而不添加新类？

Answer 1

你把这个复杂化了一点。您只需使用 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
  });
});