Question

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

BTN就绪状态
BTN-工作状态
BTN完成的状态
BTN-失败状态

现在每个按钮都有一个 btn-ready-state 类，当您单击该类更改为 btn-working-state 的按钮时，按钮的文本会发生变化“工作”，按钮内出现一个小的加载图标。操作成功完成后，如果失败，则切换到 btn-completed-state ，然后 btn-failed-state 。现在我已经能够在我的代码中使用jquery执行此操作，但代码非常混乱且不整洁，并且无法正常工作。我被告知我可以使用指令来实现这一点，但由于我是角色的新手我很困惑如何用指令实现这个，我知道什么是指令是什么以及如何制作一个，我的问题是这里的实现这个特殊的功能。这就是我用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>');

您现在可以在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。

根据按钮状态更改CSS

1 个答案: