jquery - easyzoom jquery 的两个实例相互控制

Question

尝试设置 2 个 easyZoom jquery 实例(https://i-like-robots.github.io/EasyZoom/)，由于某种原因，只有 1 个实例在工作，但两组缩略图都控制第一个实例。

我的JS如下:

// Instantiate EasyZoom instances
var $easyzoom = $('.easyzoom').easyZoom();
// Setup thumbnails example
var api1 = $easyzoom.filter('.easyzoom--with-thumbnails').data('easyZoom');
$('.thumbnails').on('click', 'a', function(e) {
  var $this = $(this);
  e.preventDefault();
  // Use EasyZoom's `swap` method
  api1.swap($this.data('standard'), $this.attr('href'));
});

// Instantiate EasyZoom instances
var $easyzoom = $('.easyzoom2').easyZoom();
// Setup thumbnails example
var api2 = $easyzoom.filter('.easyzoom--with-thumbnails').data('easyZoom');
$('.thumbnails').on('click', 'a', function(e) {
  var $this = $(this);
  e.preventDefault();
  // Use EasyZoom's `swap` method
  api2.swap($this.data('standard'), $this.attr('href'));
});

我的第一个实例是 .easyzoom，第二个实例是 .easyzoom2

一切都正确显示，但如果我从 easyzoom2 选择缩略图，它会在 easyzoom 中显示

不知道我哪里出错了，任何帮助都会很棒!

Answer 1

您正在重复使用相同的变量名称 ($easyzoom)，因此您的第二个实例将替换第一个。您还将事件监听器应用于所有 .thumbnails，而不是为您的第一个 easyzoom 实例应用一组缩略图，为第二个实例应用另一个缩略图。

我不知道您的 HTML 是什么样子，但您需要确保每个 easyzoom 实例都是不同的。

// Instantiate EasyZoom instances
var $easyzoom1 = $('.easyzoom1').easyZoom();
// Setup thumbnails example
var api1 = $easyzoom1.filter('.easyzoom--with-thumbnails').data('easyZoom');
$('.easyzoom1 .thumbnails').on('click', 'a', function(e) {
    var $this = $(this);
    e.preventDefault();
    // Use EasyZoom's `swap` method
    api1.swap($this.data('standard'), $this.attr('href'));
});

// Instantiate EasyZoom instances
var $easyzoom2 = $('.easyzoom2').easyZoom();
// Setup thumbnails example
var api2 = $easyzoom2.filter('.easyzoom--with-thumbnails').data('easyZoom');
$('.easyzoom2 .thumbnails').on('click', 'a', function(e) {
    var $this = $(this);
    e.preventDefault();
    // Use EasyZoom's `swap` method
    api2.swap($this.data('standard'), $this.attr('href'));
});