我想迭代一组元素并为每个p
元素添加一个动态创建的元素。img
编辑添加的图像后,load
我想p
使用名为addText
.
我的非工作代码:(在http://jsbin.com/abebof/2/edit上查看它的实际操作)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Example</title>
<style>img { max-width: 100%; }</style>
</head>
<body>
<p>Image #1</p>
<p>Image #2</p>
<p>Image #3</p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
function addText(paragraph, text) {
paragraph.text(paragraph.text() + '. ' + text);
console.log('called');
}
$('p').each(function (i) {
jthis = $(this);
jthis.css('border', '5px solid');
addText(jthis, 'The function works!');
var jimg = $('<img src="http://i.imgur.com/IH38U.png class="loading" />');
jimg.load(function () {
addText(jthis, 'Loaded!');
});
jimg.appendTo(this);
});
</script>
</body>
</html>
我正在寻求帮助的问题:
- 没有图像加载到
Image #3
段落中。为什么不? - 该
Loaded!
消息将打印到Image #3
每个图像的段落中。它应该打印到包含图像的段落中。我该如何纠正它?