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实例的缩略图应用于第二个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'));
});

easyzoom jQuery的两个实例相互控制

1 个答案: