0

次のhtmlコードがあります。画像ボタン「button.png」をクリックすると、対応する画像「image.png」が「content」divに表示されます。

HTML：

<div>
  <a href="/static/images/image.png" class="content">
      <img src="/static/images/button.png" class="button">
  </a>
</div>
<div id="content"></div>

jQuery：

$(document).ready(function() {
  $('a.content').click(function() {
    var url = $(this).attr('href');
    $('#content').load(url);
      return false
  });

ただし、画像を正しく表示できませんでした（コードの混乱が表示されます）。助けてください。ありがとう。}）;

4

3 に答える 3

3

このloadメソッドは、指定されたURLをHTMLとしてロードし、そのHTMLを選択したノードに挿入しようとします。PNGはHTMLではないため、機能しloadません。img代わりに、適切な。を使用して要素を追加しますsrc。それは次のように実装されるかもしれません：

$('<img>').attr('src', url).appendTo('#content');

content divただし、画像が蓄積されないように、追加する前にクリアすることをお勧めします。そのために、を使用できますempty。

于 2013-02-08T04:27:06.290 に答える
1

あなたはそれを完了するのにとても近いです。

$(document).ready(function() {
  $('a.content').click(function() {
    var url = $(this).attr('href');
    $('#content').html($("<img/>").attr('src',url));
    return false
  }
);

html（）メソッドを使用して、divの内容全体を空にする/置き換えることができます。

于 2013-02-08T05:31:58.777 に答える
1 
$(document).ready(function() {
$('a.content').click(function() {
    var url = $(this).attr('href');
    $('<img src="'+url+'">').appandTo("#content");
});

画像を表示するには、<img>タグを使用する必要があるためです。また、appendTo()は、新しい DOM の作成に役立ちます。

于 2013-02-08T04:28:32.717 に答える