Question

我正在开发一项网络服务，

当用户通过ajax请求更多数据时，我希望包含数据的div显示加载圈。我在样式文件中写了一个css类，当我想要圆圈时：

.ajax_getTeams_loading{

background: url('ajax-loader.gif') no-repeat center center;

 }

所以我的ajax函数是这样的：

        function(profile, divId){



    $('#' + divId).attr('class', 'goose');


    /*$.get('testGetTeams.php', {username: profile}, function(data) {
        $('#' + divId).html(data);
    });*/

}

问题在于圈子永远不会出现。我尝试将css类简化为背景颜色：蓝色，但这甚至都不起作用。我也完全删除了ajax部分，它仍然根本不起作用。我究竟做错了什么？

Answer 1

尝试使用

$('#'+divId).removeClass('old_class');
$('#'+divId).addClass('new_class');

Answer 2

此时我没有看到你将“ajax_getTeams_loading”类添加到div中。但是，因为它是背景，如果div中有数据，您可能看不到它。然后它将在文本下方或div中的任何内容。

最好用加载图标替换div中的任何内容，然后用新请求的数据替换加载图标。例如：

// store your div object in a variable,
// this is faster since you'll be using it multiple times
var div = $('#' + divId);

// replace the div's content with the loader
// you might want to add a width and height to the css
// to make sure the div is large enough to show the entire loading icon
var loader = '<div class="ajax_getTeams_loading"></div>';
div.html(loader);

$.get('testGetTeams.php', {username: profile}, function(data) {
  // replace the loader icon with the requested data
  div.html(data);
});

Answer 3

看起来你只是设置错误的课程

您的课程为ajax_getTeams_loading，但您要添加goose。使用相同的名称，它应该没问题。

另外，您可能希望查看一些jQuery函数：

Answer 4

请注意attr将清空属性并将其替换为您传递的内容，因此在课程中我们可以使用其中的几个，例如

<div id="ajax_getTeams_loading"
  class="classA classB classC">text</div>

你使用

$("#ajax_getTeams_loading").attr("class", "classD");

这将最终得到：

文本女巫不可能是你想要的。对于这个àddCLassand removeClass`，可以更好地为DOM元素添加和删除css类

在您的特定情况下，您可以轻松改变您做事的方式（不是如果不起作用，但这是您在那里发现的最多）

<html>
  <head>..</head>
  <body>
    <div id="ajax-response-wrapper">
      <div id="ajax-loading" style="display:none;">
        <img src="loading.gif" alt="" /></div>
      <ul id="myAjaxPopulatedList"></ul>
    </div>
    <a id="load" href="javascript:void(0);">Load list from ajax</a>
    <script>
       $(document).ready( function() {
         $("#load").click( fcuntion() {
            // let's show the loading while we are fetching data
            $("#ajax-loading").show();
            // get our stuff
            $.get('testGetTeams.php', {username: profile}, function(data) {
               // we got it, let's hide the loading now
               $("#ajax-loading").hide();
               // and append the data
               $('#myAjaxPopulatedList').append(data);
            });
         });
       });
    </script>
  </body>
</html>

我希望这可以帮助你获得你想要的东西并看看它是如何工作的

Answer 5

jQuery具有AJAX的启动和停止指示器。由于你正在使用ajax调用，你可以尝试一下。

function(profile, divId){

$.ajaxStart(function() {
    // add the loading class while ajax is working
    $('#loading').addClass("ajax_getTeams_loading");
});

$.ajaxComplete(function() {
    // hide the loading div when we're done
    $('#loading').hide();
});

// initiate the object sent to the server as a post
var data = {};
data.username = profile;

$.ajax({ 
       url: "testGetTeams.php", 
       data: data,
       type: "POST",
        success: function(data){
           $('#' + divId).html(data);
       }
});

}

jquery .attr（）类开关无法正常工作

5 个答案: