Question

我和我的朋友正试图解决这个问题。问题是类id调用z无法完全隐藏在页面加载上。它显示了z的一部分，但我们

期望z中的所有内容（包括z it self）在页面加载时隐藏，我们想按下按钮以查看整个z类但我们在执行此操作时遇到问题所以我们怎么能这样做呢？

我们不希望它看起来像现在这样。

的index.php

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
  var z = $('.z');
  var x = $('#x');
  
  var XHR = function() { output = "";
  $.getJSON("x.json", function(data) {
    $.each(data.shop, function(index, element) {
        for (var j in element) {
          output += element[j] + '<br>';
        }
      });
      x.html(output);
   });
};
  $("button").click(function(){ XHR(); });
z.show();
});
  </script>
  <style>
  h1 {
  color: gold;
}

#x {
  color: white;
  text-align: center;
}
.z {
  background-color: red;
  width: 250px;
  margin: auto;
  padding-bottom: 5px;
display: none;
}
  </style>
</head>
<body>
<div class="z">
<h1>Details </h1>
<h2 id="x"></h2>
</div>
<button>Click</button>
</body>
</html>

x.json

{
        "shop": [{
                "item": "Ps3",
                "cost": "$150"
            },
            {
                "item": "xbox 360",
                "cost": "$140"
            },
            {
                "event": "Black Friday",
                "date": "4-25-2018"
            },
            {
                "special_guest": "John Doe",
                "time": "4:30 pm"
            }
        ]
    }

Answer 1

在当前代码中，在加载页面时显示Z类，如果我没有误解，请尝试更改程序：

$("button").click(function(){ XHR();});
z.show();

到了

$("button").click(function(){ 
  XHR();
  z.show();
});

左右如果你想在加载后看到Z类：

  $(document).ready(function() {
  var z = $('.z');
  var x = $('#x');

  var XHR = function() { output = "";
  $.getJSON("x.json", function(data) {
    $.each(data.shop, function(index, element) {
        for (var j in element) {
          output += element[j] + '<br>';
        }
      });
      x.html(output);
      z.show(); // Show Z div!
   });
};
  $("button").click(function(){ XHR(); });
});

Answer 2

您的z.show应放在按钮点击处理程序中。这应该可以解决你的问题。

那是：

$("button").click(function(){ 
  XHR(); 
  z.show();
});

脚本部分无法隐藏在页面加载上

2 个答案: