更改基于按钮状态的CSS

Question

在我的应用程序中，我通过ajax将数据发布到服务器，而数据正在发布到服务器，我希望能够向用户显示确实发生了一些事情，现在是一种简单的方法这将是显示一个加载gif。我真正想要做的是改变被点击的按钮的状态。我有4个班在我的CSS：

1. BTN就绪状态
2. BTN-工作状态
3. BTN-完成状态
4. BTN-失败状态

现在每个按钮有一类btn就绪状态当您单击该按钮类更改为btn工作状态其中该按钮的文本更改为“工作”和作为商场加载图标出现在按钮内。当操作成功完成后，如果它失败，则切换到btn完成状态然后btn失败状态。现在我已经能够在我的代码中使用jquery完成这项工作，但代码非常混乱，不整洁，并且无法正确使用angular。我被告知我可以使用指令来实现这一点，但由于我是新来的角我很困惑如何实现这与指令，我知道什么是一个指令是如何做一个，我的问题在这里是执行这个特殊的功能。这是我用jQuery做的：

<script type="text/javascript"> 
     $(document).ready(function() { 
      var $loading = $('#loading'); 

      $loading.on("change", function(){ //bind() for older jquery version 
       var index = parseInt($('#loading').val()); 
       var done = parseInt($('#done').val()); 

       if (done === 0) { 
        $('.btn.ticket:eq(' + [index] + ')').removeClass('btn-ready-state'); 
        $('.btn.ticket:eq(' + [index] + ')').addClass('btn-working-state'); 

        $('.btn.ticket:eq(' + [index] + ')').find('.text').text('Working..'); 

        $('.btn.ticket:eq(' + [index] + ')').find('.state').addClass('loading'); 
        $('.btn.ticket:eq(' + [index] + ')').find('i').replaceWith('<img src="/images/loading.gif">' + '</img>'); 
       } else { 
        $('.btn.ticket:eq(' + [index] + ')').removeClass('btn-ready-state'); 
        $('.btn.ticket:eq(' + [index] + ')').removeClass('btn-working-state'); 
        $('.btn.ticket:eq(' + [index] + ')').addClass('btn-completed-state'); 

        $('.btn.ticket:eq(' + [index] + ')').find('.text').text('Added'); 

        $('.btn.ticket:eq(' + [index] + ')').find('.state').addClass('done'); 
        $('.btn.ticket:eq(' + [index] + ')').find('i').replaceWith('<i class="glyphicon glyphicon-ok state"></i>'); 
        $('.btn.ticket:eq(' + [index] + ')').find('img').replaceWith('<i class="glyphicon glyphicon-ok state"></i>'); 
       } 


      }).change(); //could be change() or trigger('change') 

     }); 

     $(document).on("click", ".btn.ticket", function() { 
      var index = $(".btn.ticket").index(this); 
      $('#loading').val(index).change(); 
     }); 

     $(document).on("click", ".btn.next", function() { 
      $(this).removeClass('btn-ready-state'); 
      $(this).addClass('btn-working-state'); 

      $(this).find('.text').text('Working..'); 

      $(this).find('.state').addClass('loading'); 
      $(this).find('i').replaceWith('<img src="/images/loading.gif">' + '</img>'); 
     }); 
</script> 

这是按钮的一个示例HTML：脚本

<button class="btn-ready-state"><span class="img"></span><span class="text"></span></button> 

Answer 1

90％，改变了风格。你说过你想表明一个Ajax？看看这个：

<script> 
    jQuery.ajaxSetup({ 
     ajaxStart:function(){ 
     jQuery('body').toggleClass('ajaxing', true); 
     }, 
     ajaxStop:function(){ 
     jQuery('body').toggleClass('ajaxing', false); 
     } 
    }) 
</script> 

这更好，因为你不需要重复自己（DRY-Principle）。的

因此，而不是在JavaScript这样做：

$(this).find('i').replaceWith('<img src="/images/loading.gif">' + '</img>'); 

现在你可以做所有你在JavaScript中的CSS做图形的东西：

.ajaxing i { 
    background-image: url(/images/loading.gif); 
} 
// for text you can use this: 
.ajaxing .btn.ticket:active:before{ 
    position:relative; 
    content:'Working...'; 
} 

或者在anguarjs：

angular.module('app', []).value('loadManager', { 
    c: 0, 
    requested: function() { c++; document.body.class="ajaxing";}, 
    responded: function() { c--; if(!c)document.body.class="";} 
}).factory('loadingInterceptor', function(loadManager) { 
    return { 
    request: function(e) { 
     loadManager.requested(); 
      return e; 
     }, 
    response: function(e) { 
     loadManager.responded(); 
     return e; 
    }, 
    } 
}); 
$httpProvider.interceptors.push('loadManager'); 

所有这些只是一个例子。我不知道你正在使用的完整的HTML。