1

次のようなマークアップがあります。

<div class="large-image">
    <img src="foo.jpg" class="original-size"> <--This persists
    <img src="foo-fullsize.jpg" class="zoomed"> <--injected by jQuery zoom plugin
    <img src="bar-fullsize.jpg" class="zoomed"> <--also injected
</div>

<div class="thumbnails">
    <a href="foo-fullsize.jpg" class="thumb"><img src="foo-thumb.jpg"></a>
    <a href="bar-fullsize.jpg" class="thumb"><img src="bar-thumb.jpg"></a>
</div>

次のようなコードがあります。

$(window).load(function() {
   $('a.thumb').click(function(){
      $('#main-image').zoom({url: this.href}); // jQuery zoom
   });
});

親指のリンクをクリックするたびに、ズーム プラグインが新しい画像を<div class="large-image">コンテナーに挿入します。新しい画像を作成する前に、ズームされたクラスで既存の画像をすべて削除できるようにしたいと考えています。これを達成するには on() を使用する必要があることはわかっていますが、生成された画像で動作させることができないようです。

4

3 に答える 3

3

これはそれを行う必要があります：

$(window).load(function() {
  $('a.thumb').on('click', function() {
    $('img.zoomed', this).remove(); 
  });
});

.zoomedこれにより、クリックされたサムネイルに関連するすべての画像が削除されます。ページ上のすべて.zoomedの画像をターゲットにする場合は、コンテキストを削除する必要があります。

$('img.zoomed').

編集

生成コンテンツだとは思いませんでした。これに旋風を与えます：

$(window).load(function() {
  $(document).on('click', 'a.thumb', function() {
    $('img.zoomed').remove(); 
  });
});
于 2013-02-14T22:18:19.430 に答える
2

セレクターは、実行時に、追加された方法とは関係なく、現在のすべての要素をクラス名$('img.zoomed')と照合します。<img>zoomed

$(window).load(function() {
   $('a.thumb').click(function(){
      $('img.zoomed').remove();
   });
});

jQuery Zoomプラグインは、元の画像の横に追加の要素を作成するためです。代わりに<img>、下のすべての要素を削除してみてください。div.large-image

$(window).load(function() {
   $('a.thumb').click(function(){
      $('div.large-image img').remove();
   });
});
于 2013-02-14T22:18:18.063 に答える
0

jquery.remove()メソッドを使用します。

$("img[class='zoomed']").remove();

また：

$("img.zoomed").remove();
于 2013-02-14T22:20:40.153 に答える