<!DOCTYPE html>
<html>
<head>
<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>
<body>
<div id="container">
</div>
</body>
</html>
此代码因某些原因无效,是的,我确实为jQuery添加了google apis。这段代码适用于我的老师和其他所有人,我的老师也仔细查看过,发现没有任何问题。
答案 0 :(得分:1)
您正在使用jQuery。您必须将其https://code.jquery.com/
包括在内答案 1 :(得分: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>
<div id="container"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</body>
</html>
答案 2 :(得分:1)
至少有三个问题:
你还没有包含jQuery。添加一个包含它的脚本标记,位于您现在拥有的标记之上。
您的代码在它所引用的元素存在之前运行。将script
标记移至文档的末尾,就在结束</body>
标记之前(或使用jQuery&#39; ready
回调,但此处不需要)
您尚未宣布i
。虽然它有效,但它会创建一个隐式全局。隐含全局变量是一件坏事™。声明你的变量。
答案 3 :(得分:1)
<!DOCTYPE html>
<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">
$(document).ready(function(){
for (i=1; i<=25; i++) {
$("#container").append("<div class='divs'></div>");
}
});
</script>
</head>
<body>
<div id="container">
</div>
</body>
</html>
&#13;
答案 4 :(得分: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>
答案 5 :(得分: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>
答案 6 :(得分:0)
您需要使用jQuery。并添加您的脚本末端。这是我的代码:
for (i=1; i<=25; i++) {
$("#container").append("<div class='divs'></div>");
}
&#13;
#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;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="container">
</div>
&#13;