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 回答