div点击不清除?

时间:2018-12-26 08:09:47

标签: javascript php jquery html css

我正在制作一个基本网页,该网页使用PHP从服务器提取数据并显示其内容。数据显示得很好,但是在加载数据时,我想包含一条加载消息。

我的目的是在单击时清除主div并显示消息。然后,在加载数据时,隐藏加载消息并显示数据。

截至目前,加载消息完全没有显示,来自最后一个请求的数据一直显示在主div中,直到加载下一个信息为止。

谢谢您的帮助!

function load(which, x) {
  $(".menu").css("background-color", "#E9967A");
  $(".menu").not(which).css("background-color", "#854F96");

document.getElementById("main").innerHTML = "";
document.getElementById("loading").show();

  $.ajax({
    url: "php/script.php",
    type: "post",
    data: {"data": x},
    success: function(response) {
      document.getElementById("Loading").hide();
      document.getElementById("main").innerHTML = response;
    }
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="header"></div>

<div class="sidebar">
  <div class="menu" id="profile" onclick="load(this, 1)"></div>
  <div class="menu" id="cardbook" onclick="load(this, 2)"></div>
  <div class="menu" id="progress" onclick="load(this, 3)"></div>
  <div class="menu" id="achievements" onclick="load(this, 4)"></div>
</div>

<div id="main">
  <div id="loading" style="display:none;">
    Loading...
  </div>
</div>

修改1

我将JavaScript更改为以下内容。但是,我仍然收到相同的结果

<script>
    function load(which, x) {
        $(".menu").css("background-color", "#E9967A");
        $(".menu").not(which).css("background-color", "#854F96");

        $("#main").innerHTML = "";
        $("#loading").show();

        $.ajax({
            url: "php/script.php",
            type: "post",
            data: {"data": x},
            success: function(response) {
                $("#loading").hide();
                $("#main").innerHTML = response;
            }
        });
    }
</script>

1 个答案:

答案 0 :(得分:2)

由于using System.Web.Mvc; namespace WebApplication1.Controllers { extern alias Alias1; extern alias Alias2; using namespace1 = Alias1::System.Net.Http.HttpRequestMessageExtensions; using namespace2 = Alias2::System.Net.Http.HttpRequestMessageExtensions; public class HomeController : Controller { public void Test() { // ... namespace1.GetRequestContext(request); //namespace2.GetRequestContext(request); // error } 将返回没有这些方法的参考DOM元素。

document.getElementById("Loading").show()是jQuery方法,因此创建jQuery对象以使用它们。

使用.hide()$("#loading").show();

$("#loading").hide();
function load(which, x) {
  $(".menu").css("background-color", "#E9967A");
  $(".menu").not(which).css("background-color", "#854F96");

  $("#main").hide().html("");
  $("#loading").show();

  $.ajax({
    url: "php/script.php",
    type: "post",
    data: {
      "data": x
    },
    success: function(response) {
      $("#main").show().html(response);
      $("#loading").hide();
    }
  });
}