Question

为什么数组中的图像不显示在div

中

我试图将图像附加到下面定义的div中，但它们没有显示在div中。

<html>
<head>
<title>jQuery Hello World Alert box</title>
<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">  
</script>
<script>
var content = "";
var myArray = ['D:/1146Wj.jpg', 'D:/1146Wj.jpg','D:/1146Wj.jpg'];
myArray.forEach(function (element) {
alert(element);
  content += "<div><a href='#'><img src=" + element + "   /></a></div>";
 $("#container").html(content);
});

</script>
</head>
 <script type="text/javascript">
$(document).ready(function(){
$("#cl").click(function(){
alert("HELLO WORLD!");
});
});
</script>
<body>
<font color="red">CLICK BELOW BUTTON TO SEE ALERT BOX</font>
<br>
<br>
<button id="cl">Click Me</button>
<div id="container">
</div>
</body>
</html>

Answer 1

首先你的for循环是错误的

myArray.forEach(function (element) {
alert(element);
  content = "<div><a href='#'><img src=" + element + "   /></a></div>";
 $("#container").append(content);
});

检查DEMO

确保你在$（文件）.ready

中有这个for循环

Answer 2

确保在文档加载后将图像附加到DOM（将代码放在$（文档）.ready（））中

Answer 3

有几个原因。

首先，因为在评估脚本时，HTML页面尚未加载且dom尚未就绪。因此jQuery无法找到和修改div。您需要将脚本包含在回调函数中，并使用$(document).ready()注册此回调函数。

其次，因为HTML页面不应该访问最终用户的本地驱动器来加载图像。即使他们这样做，也需要使用file：//协议。图片应该通过HTTP提供，就像页面一样。

为什么图像不会附加到div

3 个答案: