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 の準備が整っていないためです。そのため、jQuery で div を見つけて変更することはできません。スクリプトをコールバック関数に囲み、このコールバック関数を に登録する必要があります$(document).ready()。

2 つ目は、HTML ページがエンド ユーザーのローカル ドライブにアクセスして画像をロードすることは想定されていないためです。たとえそうしたとしても、file:// プロトコルを使用する必要があります。ページと同様に、画像は HTTP 経由で提供する必要があります。

于 2012-04-21T09:33:52.870 に答える