1

为什么数组中的图像没有显示在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>
4

3 回答 3

2

首先你的 for 循环是错误的

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

检查演示

确保你的 $(document).ready 中有这个 for 循环

于 2012-04-21T09:30:34.027 回答
1

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

于 2012-04-21T09:31:49.157 回答
0

有几个原因。

首先是因为在评估脚本时，HTML 页面还没有加载，dom 还没有准备好。所以 div 不能被 jQuery 找到和修改。您需要将脚本封装在一个回调函数中，并将该回调函数注册到$(document).ready().

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

于 2012-04-21T09:33:52.870 回答