easyzoom jquery的两个实例相互控制

试图设置easyZoom jquery（）的两个实例，由于某种原因，只有一个实例在工作，但两组缩略图都控制着第一个实例

我的建议如下：

// 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中

---

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

您正在重用相同的变量名（

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

---

谢谢你的回复，我尝试了你的代码，现在都不起作用了，我已经粘贴了我的HTML，如果你能看一下的话，我真的很感激！非常感谢：DAll排序后，我不得不在缩略图中添加一个自定义类，以确保所有内容都是个性化的，谢谢！！！：D