代码无效

时间:2016-12-01 11:16:54

标签: javascript html css

<!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。这段代码适用于我的老师和其他所有人,我的老师也仔细查看过,发现没有任何问题。

7 个答案:

答案 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)

至少有三个问题:

  1. 你还没有包含jQuery。添加一个包含它的脚本标记,位于您现在拥有的标记之上。

  2. 您的代码在它所引用的元素存在之前运行。将script标记移至文档的末尾,就在结束</body>标记之前(或使用jQuery&#39; ready回调,但此处不需要)

  3. 您尚未宣布i。虽然它有效,但它会创建一个隐式全局。隐含全局变量是一件坏事™。声明你的变量。

答案 3 :(得分:1)

&#13;
&#13;
 <!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;
&#13;
&#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。并添加您的脚本末端。这是我的代码:

&#13;
&#13;
  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;
&#13;
&#13;