更改基於按鈕狀態的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。