0

現在のDOMツリーからすべての画像を取得しています。それらをカスタムのunifydivに表示し、ユーザーが選択できるようにします。

var allImgs = $('img');

allImgs.each(function (index) {
    var imgUrl = $(this).attr("src");
    var newImgTag = $('<img></img>');
    newImgTag.attr("src", imgUrl);
    newImgTag.attr("width", "100px");
    newImgTag.attr("height", "100px");

    $("#Image-Grid").append(newImgTag);  // this works

    newImgTag.click(function (event) {
        $('#Selected-Image').empty();
        $('#Selected-Image').append(newImgTag);   // this doesn`t work why????
    });
});

すべての画像をunifydivに表示することができます。ただし、unifydivから1つの画像を選択すると。画像が正しく表示されません。

たとえば、私はランダムにファッションサイトを選びます。 http://www.abercrombie.com/webapp/wcs/stores/servlet/ProductDisplay?catalogId=10901&storeId=10051&langId=-1&categoryId=12266&parentCategoryId=%5bLjava.lang.String%3b%403dc73dc7&topCategoryId=12203&productId=1014475

写真の1つを選択すると、写真のsrcリンクが次のようになっていることに気付きます。 /anf/50817/img/global/logo-print.png

クリックイベントの後半で画像を表示できないのはなぜですか？

4

1 に答える 1

1 
newImgTag.click(function (event) {
        $('#Selected-Image').empty();
        $(this).clone().appendTo('#Selected-Image');
});

ドキュメント：

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>

（...）.append（）の説明に示されているように、通常、要素がDOMのどこかに挿入されると、その要素は古い場所から移動されます。したがって、コードが与えられます：

$('.hello').appendTo('.goodbye');

結果のDOM構造は次のようになります。

<div class="container">
  <div class="goodbye">
    Goodbye
    <div class="hello">Hello</div>
  </div>
</div>

これを防ぎ、代わりに要素のコピーを作成するには、次のように記述します。

$('.hello').clone().appendTo('.goodbye');

これにより、次のようになります。

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">
    Goodbye
    <div class="hello">Hello</div>
  </div>
</div>
于 2012-09-09T09:05:47.580 に答える