2016-12-01 93 views
-4

代码不工作

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
     <style> 
 
      #container{ 
 
\t   width: 520px; 
 
\t   height:520px; 
 
\t   border:3px solid black; 
 
      } 
 
      .divs{ 
 
\t   color:white; 
 
\t   background-color: red; 
 
\t   width:100px; 
 
\t   height:100px; 
 
\t   text-align: center; 
 
\t   vertical-align: middle; 
 
\t   float:left; 
 
\t   border: 2px solid black; 
 
      } 
 
     </style> 
 
\t \t <meta charset="utf-8"> 
 
\t \t <link rel="stylesheet" href="kalender.css"> 
 
\t \t <script type="text/javascript"> 
 
\t \t \t for (i=1; i<=25; i++) { 
 
\t \t \t \t $("#container").append("<div class='divs'></div>"); 
 
\t \t \t } 
 

 
\t \t </script> \t 
 
\t </head> 
 
\t \t <body> 
 
\t \t \t 
 
\t \t \t <div id="container"> 
 
\t \t \t \t \t 
 
\t \t \t </div> 
 

 
</body> 
 
</html>

这个代码不工作由于某种原因,是的,我确实添加了谷歌的API jQuery的。这段代码适用于我的老师,我的老师也仔细研究过,没有发现任何问题。

+2

包括jQuery库和包装你的代码文档准备事件处理程序内或之前'将其放置在您的文档的末尾'。当这段代码被执行时,DOM还没有准备好,它没有找到必要的元素。 –

+0

帽子给老师:P – Aslam

回答

1

你丢失了一些jQuery库,请使用此代码检查工作的良好

for (i=1; i<=25; i++) { 
 
    $("#container").append("<div class='divs'>something</div>"); 
 
}
<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>Untitled Document</title> 
 
</head> 
 

 
<body> 
 
    \t 
 
<div id="container"></div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
</body> 
 
</html>

0

要确保你添加

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

否则你代码正在工作

for (i = 1; i <= 25; i++) { 
 
    $("#container").append("<div class='divs'></div>"); 
 
}
#container { 
 
    width: 520px; 
 
    height: 520px; 
 
    border: 3px solid black; 
 
} 
 
.divs { 
 
    color: white; 
 
    background-color: red; 
 
    width: 100px; 
 
    height: 100px; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    float: left; 
 
    border: 2px solid black; 
 
}
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <link rel="stylesheet" href="kalender.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
</head> 
 

 
<body> 
 

 
    <div id="container"> 
 

 
    </div> 
 

 
</body> 
 

 
</html>

1

至少有三个问题:

  1. 您还没有包括jQuery的。添加一个包含它的脚本标记,超过您现在拥有的脚本标记。

  2. 您的代码在其引用的元素存在之前正在运行。将script标签移动到文档的末尾,就在关闭</body>标签之前(或使用jQuery的ready回调,但这里没有必要)。

  3. 您还没有申告i。虽然它起作用,但它会创建一个隐含的全球。隐式全局变量是一件坏事。声明你的变量。

1

<!DOCTYPE html> 
 
    <html> 
 
    <head> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
    <style> 
 
     #container{ 
 
      width: 520px; 
 
      height:520px; 
 
      border:3px solid black; 
 
     } 
 
     .divs{ 
 
      color:white; 
 
      background-color: red; 
 
      width:100px; 
 
      height:100px; 
 
      text-align: center; 
 
      vertical-align: middle; 
 
      float:left; 
 
      border: 2px solid black; 
 
     } 
 
    </style> 
 
    <meta charset="utf-8"> 
 
    <link rel="stylesheet" href="kalender.css"> 
 
    <script type="text/javascript"> 
 
\t $(document).ready(function(){ 
 
\t for (i=1; i<=25; i++) { 
 
      $("#container").append("<div class='divs'></div>"); 
 
     } 
 
\t }); 
 
    </script> 
 
</head> 
 
    <body> 
 

 
     <div id="container"> 
 

 
     </div> 
 

 
</body> 
 
</html>

0

您正试图在这个部分使用jQuery在你的代码。

<script type="text/javascript"> 
     for (i=1; i<=25; i++) { 
      $("#container").append("<div class='divs'></div>"); 
     } 

    </script> 

但要使用jQuery语法,您需要先将它包含在您的文件中。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

在您的<head>标记中。

<html> 
    <head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <style> 
     #container{ 
      width: 520px; 
      height:520px; 
      border:3px solid black; 
     } 
     .divs{ 
      color:white; 
      background-color: red; 
      width:100px; 
      height:100px; 
      text-align: center; 
      vertical-align: middle; 
      float:left; 
      border: 2px solid black; 
     } 
    </style> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" href="kalender.css"> 
    <script type="text/javascript"> 
     for (i=1; i<=25; i++) { 
      $("#container").append("<div class='divs'></div>"); 
     } 

    </script> 
</head> 
0

您需要使用jQuery。并添加你的脚本的正文结束。这里是我的代码:

for (i=1; i<=25; i++) { 
 
    $("#container").append("<div class='divs'></div>"); 
 
    }
#container{ 
 
     width: 520px; 
 
     height:520px; 
 
     border:3px solid black; 
 
    } 
 
    .divs{ 
 
     color:white; 
 
     background-color: red; 
 
     width:100px; 
 
     height:100px; 
 
     text-align: center; 
 
     vertical-align: middle; 
 
     float:left; 
 
     border: 2px solid black; 
 
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div id="container"> 
 
</div>