jquery 插件缩放 - 显示原始图像的缩略图。不是正确的

Question

我正在使用来自https://github.com/jackmoore/zoom 的缩放 jquery 插件，但在缩放与缩略图不同的图像时遇到问题。它会缩放原始图像。

请看视频：https://www.useloom.com/share/0630cf4dd85d403081e1cfbd0443f34c

我的 jquery 代码：

$(document).ready(function(){
  $('.image-zoom')
  .css('display', 'block')
  .parent()
  .zoom({
    url: $('.image-zoom').attr('data-zoom')
  });
});

我猜问题是来自attr('data-zoom') 的正确图像的定位。我怎样才能正确地做到这一点？

Answer 1

我相信问题是因为您正在使用一个类来查找您的 attr，并且它会返回所有这些。使用this 应该可以解决您的问题。

$('.image-zoom')
    .css('display', 'block')
    .zoom({
        url: $(this).attr('data-zoom')
    });

通过使用this，我们可以停留在当前图片的范围内。