Question

我无法隐藏我的“目标”div。当我将div改为隐藏为“div1”时，它可以工作，但这不是我想要的。任何人都可以看到为什么我无法隐藏“目标”div？

<html>
<head>
  <title>My sample</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

  <script type="text/javascript" language="javascript">


     $(document).ready(function() {
        $("#hide").click(function(event){
          var ele = document.getElementById("target");
          ele.style.display = "none";                     
        });
     });                                

    //myItems.length
     $(document).ready(function() {
        $("#driver").click(function(event){
           $.getJSON('http://www.example.com/JSONV5.php', function(jd) {
           var myItems = jd["items"];
              for (i = 0; i < 1; i++) {
                $('#div1').append('<div id="target">');
                $('#div1').append('<p> Title: ' + jd["items"][i]["title"]    + '</p>');
                $('#div1').append('<p> Description: ' + jd["items"][i]["description"]   + '</p>');
                $('#div1').append('<p><img alt="" src=/uploads/' + jd["items"][i]["image1"] + '></p>');
                $('#div1').append('</div>');                       
              };
           });
        });
     });
  </script>

   </head>  
   <body>
     <p>Click on the button to load result.html file:</p>
     <div id="div1" style="background-color:#cc0;">
       DIV 1
     </div>

     <input type="button" id="driver" value="Load Data" />
     <input type="button" id="hide" value="Hide Data" />
   </body>
</html>

Answer 1

你不能使用追加，就像它是一个字符串。它没有像你想象的那样构建html。它正在添加多个彼此兄弟姐妹的元素。其次，你不能拥有多个具有相同身份的项目。

 $('#div1').append(
    '<div id="target">' +
    '<p> Title: ' + jd["items"][i]["title"]    + '</p>' +
    '<p> Description: ' + jd["items"][i]["description"]   + '</p>' +
    '<p><img alt="" src=/uploads/' + jd["items"][i]["image1"] + '></p>' +
    '</div>');

Answer 2

你$ .getJSON（）调用没有返回任何数据，因此你从未创建过id为id =＆＃34; target＆＃34;

的div

$ .getJSON（）调用错误输出：＆＃34; No＆＃39; Access-Control-Allow-Origin＆＃39;标头出现在请求的资源上。起源＆＃39; null＆＃39;因此不允许访问。响应的HTTP状态代码为404.＆＃34;

Answer 3

尝试

window.onload = function() {

而不是

$(document).ready(function() {

您也可以尝试移动此

$("#hide").click(function(event){
  var ele = document.getElementById("target");
  ele.style.display = "none";                   
});

在$("#driver").click(function(event){之后。

JavaScript并隐藏div不工作

3 个答案: