根据按钮状态更改 CSS

Question

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

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

现在每个按钮都有一个 btn-ready-state 类，当您单击按钮时，该类将更改为 btn-working-state，其中按钮的文本会更改到“工作”，按钮内会出现一个小的加载图标。当操作成功完成后，它会切换到 btn-completed-state，如果失败则切换到 btn-failed-state。现在我已经能够在我的代码中使用 jquery 做到这一点，但是代码是如此混乱和不整洁，并且不能与 angular 一起正常工作。有人告诉我我可以使用指令来实现这一点，但由于我是 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 原则）。

所以不要在javascript中这样做：

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

您现在可以在 CSS 中执行您在 javascript 中执行的所有图形操作：

.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。