1

p一連の要素を反復処理し、動的に作成されたimg要素をそれぞれに追加したいと考えています。追加された画像が編集されたら、というカスタムユーティリティ関数を使用して、それを含む要素にloadテキストを追加したいと思います。paddText

私の非動作コード: ( 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ます。混乱しますか？それは私のためでもあります。詳細については、ここで 2 番目の回答 (受け入れられた回答ではなく、誤りです)を参照してください。
于 2012-11-21T09:53:58.057 に答える