1

我想迭代一组元素并为每个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>

我正在寻求帮助的问题：

  1. 没有图像加载到Image #3段落中。为什么不？
  2. 该Loaded!消息将打印到Image #3每个图像的段落中。它应该打印到包含图像的段落中。我该如何纠正它？
4

2 回答 2

1

您需要在定义负载后添加图像并使用允许显示的图像

最后你需要一个 jthis 的闭包！我使用 parent() 代替并附加而不是替换内容

演示

function addText(paragraph, text) {
  paragraph.append(text);
  console.log('called');
}
$(function() {      
  $('p').each(function (i) {
    jthis = $(this);
    jthis.css('border', '5px solid');
    addText(jthis, 'The function works!');
    var jimg = $('<img />');
    jimg.addClass("loading");
    jimg.on("load",function () {
      addText($(this).parent(), 'Loaded!');
    });
    jimg.appendTo(jthis);
    jimg.attr("src","http://lorempixel.com/output/nature-q-c-640-480-6.jpg" );

  });
});
于 2012-11-20T18:19:12.197 回答
0

非常感谢mplungjan帮助我1 因为我觉得他的答案可以进一步改进并更接近我提供的原始代码：

<!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.append(' ' + text); // #1 below
  console.log('called');
}

$('p').each(function (i) {
  jthis = $(this);
  jthis.css('border', '5px solid');
  addText(jthis, 'The function works!');

  var jimg = $('<img class="loading" />'); // #2 below.

  jimg.load(new function () {  // #3 below                  new, it creates a new closure each time.
    addText(jthis, 'Loaded!'); // WORKS now since I added
  });
  jimg.attr("src","http://i.imgur.com/IH38U.png");


  jimg.appendTo(this);
});

    </script>
  </body>
</html>

OP 源中的错误修复说明：

  1. paragraph.text()检索 中的纯文本paragraph，过滤掉所有其他 DOM 节点。我试图通过简单地paragraph.text('the new text')设置文本来简单地更改文本。我错了。它有效地设置纯文本并删除那里的所有其他内容。如果我考虑一下，这是合乎逻辑的。毕竟，如果它只是简单地更改文本并保留其他所有内容，它将无法知道我想要文本的位置（即在 img 节点之前或之后）。
  2. 创建的img节点会尽快开始加载其图像。它不会等到它被包含在 DOM 中。因此，我们必须首先创建它没有图像 URL，然后设置加载事件函数，最后设置图像 URL。如果我们立即设置 URL，则可能会错过加载事件。
  3. 每次在函数 A 中创建函数 B 时，都会使用闭包。A 中的变量可以从 B 访问。问题是如果创建了许多内部函数 (B)，它们都共享 A 中的当前变量。为了解决这个问题，使用new function. 令人困惑？这也是给我的。在此处阅读第二个答案（不是已接受的答案，这是错误的）以获取更多信息。
于 2012-11-21T09:53:58.057 回答