Question

我有一个名为loading的类：

.loading {
   display: none;
   vertical-align: top; 
   margin: 0; 
   padding: 0; 
   background: url('../images/shared/loading_16x16.gif') center center no-repeat; 
   width: 16px; 
   height: 16px;
}

以下html代码段：

<div id="loading" class="loading"></div>

和我的jQuery代码（在文档就绪）：

$.ajaxSetup({
    beforeSend: function () {
        $("#loading").show().children().show();
    },
    complete: function () {
        $("#loading").hide().children().hide();
    }
});

但show()根本不起作用。即使我从chrome开发人员窗口触发它。在Chrome开发人员窗口中，如果我从加载类中取消选中display: none，则会显示标记。

发生了什么事？

Answer 1

我刚想通了！

我通过在jQuery上执行此操作来修复它：

$.ajaxSetup({
     beforeSend: function () {
         $("#loading.loading").show();
     },
     complete: function () {
         $("#loading.loading").hide();
     }
});

希望帮助其他人：）

Answer 2

试试这个：

$.ajaxSetup({
      beforeSend:beforeSendFunction(),
      complete:onCompleteFunction()
  });
  });
  function beforeSendFunction(){
      setTimeout(function(){
          $("#loading").show();
      },2000)
  }
  function onCompleteFunction(){
      $("#loading").hide();
  }

你可以在beforesend中删除setTimeout函数，

这是工作的jsfiddle链接，我将背景图片替换为背景颜色：“JsFiddle”

Answer 3

使用$("#loading").show();代替$("#loading").show().children().show();

您在本地实例中尝试此操作，但速度非常快，因此您无法查看loading。

要验证相同，您只需从代码中转储加载隐藏行，然后您就可以尝试，现在可以找到加载文本。

      complete: function () {
               // $("#loading").hide();
            }

Answer 4

您的代码无效，因为您正在使用ID混合类。在你的css中，你有一个.loading类，但在你的jQuery中你使用了id选择器$("#loading")。你的jQuery根本找不到元素。

Answer 5

其实我自己也遇到过这个问题，并且有一个更简单的解决方案。只需删除该课程。

$('#loading').removeClass('loading');

如果css类有display：none，则jQuery显示不起作用

5 个答案: