Question

我有这样的标记：

<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（）来实现这一点，但我似乎无法使用生成的图像。

Answer 1

这应该这样做：

$(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(); 
  });
});

Answer 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();
   });
});

Answer 3

使用jquery .remove()方法：

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

或：

$("img.zoomed").remove();

使用on（）删除jQuery生成的内容

3 个答案:

修改