为什么图像不追加到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>

警报是否按预期工作？否则，请检查控制台（FF中的Ctrl + Shift + J，IE afaik中的F12）。您可以尝试在src路径中添加'file：/// D：/'。 – Armatus 2012-04-21 09:31:07

答

首先你的for循环是错误的

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

检查DEMO

请确保您有此为您$内环（文件）。就绪

放在里面document.ready工作，非常感谢，多一个问题，我怎么可以添加类到该div？ – user1253847 2012-04-21 09:39:53

content = $（'

'）; content.addClass（'your-classname'）; – Dhiraj 2012-04-21 09:40:41

检查演示，更新与添加类 – Dhiraj 2012-04-21 09:42:59

答

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

答

有几个原因。

首先，因为在评估脚本时，HTML页面尚未加载，而且dom还没有准备好。所以div不能被jQuery找到和修改。您需要将脚本放入回调函数中，并使用$(document).ready()注册此回调函数。

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

通过

标签（jQuery Hello World Alert框>）来判断，他正在尝试学习一些jQuery。从本地驱动器加载图像可以。 – <a rel="noopener">gabitzish</a> 2012-04-21 09:36:02

直到试图学习AJAX函数为止;-) – 2012-04-21 09:37:54

我基本上进入后端，作为我工作的一部分，我需要将文件夹中的图像添加到Ajax调用的jsp页面 – user1253847 2012-04-21 09:42:46

为什么图像不追加到div

相关推荐