Question

我正在用css中的跨度做表。单击某个span时，我想显示一个加载gif，同时脚本在数据库中插入一些数据。

这是范围：

<span class="label label-<?=$tag?><?=$selected?" selected":" hidden-print"?> customer-<?=$i?>" onclick="connect('customer-<?=$i?>', '<?=$customer?>', '<?=$tag?>');"><?=$tag?></span><?

这是剧本：

    <script>
  function connect(customerId, customerValue, tagValue){
    var label = $("span.label-"+tagValue+"."+customerId);
    var connectar = !label.hasClass('selected');
    console.log("haciendo " + connectar + " la conexión entre " + customerValue + " y " + tagValue);
    $(document).ajaxStart(function(){
        $('.loading.gif').show();
        alert('Cargando la etiqueta');
    }).ajaxComplete(function(){
        $('.loading.gif').hide();
        alert('Etiqueta cargada');
    });
    $.getJSON( "/api/connect.php?customerId="+customerValue+"&tagId="+tagValue+"&connect="+connectar, function( data ) {
      console.log('error: ' + data.error);
      if(data.error == "false"){
        if(data.connected == "true"){
          label.addClass("selected");
          label.removeClass("hidden-print");
        }
        if(data.connected == "false"){
          label.removeClass("selected");
          label.addClass("hidden-print");
        }
      }
    });
  }
    </script>

我的问题在这里：

<script>
  function connect(customerId, customerValue, tagValue){
    var label = $("span.label-"+tagValue+"."+customerId);
    var connectar = !label.hasClass('selected');
    console.log("haciendo " + connectar + " la conexión entre " + customerValue + " y " + tagValue);
    $(document).ajaxStart(function(){
        $('.loading.gif').show();
        alert('Cargando la etiqueta');
    }).ajaxComplete(function(){
        $('.loading.gif').hide();
        alert('Etiqueta cargada');
    })
</script>

脚本没有显示'loading.gif'，但显示'alert（'Cargando la etiqueta'）;'和'警告（'Etiqueta cargada'）;'。

gif'loading.gif'位于同一个文件夹中。我有语法错误吗？请，需要帮助。

更新：

$(document).ajaxStart(function(){
   $('#loader').show();
}).ajaxComplete(function(){
   $('#loader').hide();
});

Answer 1

$（＆＃39; .loading.gif＆＃39;）。show（）不会加载图片并显示它。最好的方法是有一些HTML

<img class="loader" src="loader.gif"/>

并将js设为

$(document).ajaxStart(function(){
    $('.loader').show();
})

Answer 2

<强> HTML

<img src="loading.gif" id="loader" alt="loading"/>

<强> CSS

#loader { display:none; }

<强> JS

$("#loader").show();

问题是你的代码：$("loading.gif").show() - 实际上不会将元素带入页面

更新为评论问题

 <html>
   <head>
    <title>Showing placement of these parts</title>
     <style>
      #loader { display:none; }
     </style>
   </head>
  <body>
     <img src="loading.gif" id="loader" alt="loading"/>
     <script src="pathto/jquery.js"></script>
     <script>
        $("loader").show();
     </script>
 </body>
 </html>

只显示HTML文档中的顺序

在上下文中更新

$(document).ajaxStart(function(){
        $('loader').show();
        alert('Cargando la etiqueta');
    }).ajaxComplete(function(){
        $('loader').hide();
        alert('Etiqueta cargada');
    });
});

onclick span - ＆gt; loading.gif没有显示ajaxStart JS

2 个答案: