Question

请帮助解决此类问题。

有submit-button，用图标装饰。如何使用ajax和fontawesome进行图标更改？按下提交后，左侧图标将更改为正在加载ajax图标，并且send button已禁用。当ajax response error，然后显示错误图标，并启用send" button时，显示错误消息。如果success：显示复选标记图标。

部分HTML：

<pre>
    <div id="#form-submit" class="field decoration clearfix submit">
        <a href="" class="button add">Submit</a>
    </div>
</pre>

css的一部分：

.button:before {
  background: #ccc;
  background: rgba(0,0,0,.1);
  float: left;
  .....
}

.add:before {
  content: "\2709";
}

我尝试为ajax制作这样的结构，是不是？

$(".button").click(function(e){
    e.preventDefault();
    $.ajax({
      beforeSend:function(xhr,opts){
        $(".button:before").append('<i class="fa fa-spinner" aria-hidden="true"></i>');
      },
      success(function(){
         $(".button:before").append('<i class="fa fa-check" aria-hidden="true"></i>');
       },
       .error(function(){
         $(".button:before").append('<i class="fa fa-exclamation" aria-hidden="true"></i>');
       },
});
});

Answer 1

首先添加一个i标记，为您的按钮添加图标，并让它有一个类fa fa-send，如下所示。

<pre>
    <div id="#form-submit" class="field decoration clearfix submit">
    <a href="javascript:void(0)" class="button add"><i class="fa fa-send"> </i> Submit</a>
    </div>
</pre>

现在您可以更改icon的课程，如下所示：

$(".button").click(function(e){
    e.preventDefault();
    var _ctrl=$(this);
    _ctrl.find('i').removeClass('fa-send').addClass('fa-spinner').attr('disabled',true);
    $.ajax({
      url:url,
      type:'GET',
      success:function(){
         _ctrl.find('i').removeClass('fa-spinner').addClass('fa-check');
       },
       error:function(){
         _ctrl.find('i').removeClass('fa-spinner').addClass('fa-send').attr('disabled',false);
       },
   });
});

注意 - 您不需要beforeSend ajax这类内容的选项，除非您在其中执行某些操作，因为您可以在点击后立即更改图标按钮。您的ajax结构中的问题已得到纠正

按下提交后，按钮的左侧图标将变为使用fontawesome加载ajax图标

1 个答案: