Question

我使用EasyZoom缩放图库（https://i-like-robots.github.io/EasyZoom/）中的图像。我想在用户单击链接时更改图库中的图像。这是页面的完整代码，

<!doctype html>
<html>
<head>
<link rel="stylesheet" href="css/easyzoom.css" />
<script src="dist/jquery-3.3.1.min.js"></script>
<script src="dist/easyzoom.js"></script>
</head>
<body>
<div class="easyzoom easyzoom--overlay easyzoom--with-thumbnails">
 <a href="example-images/3_zoom_1.jpg">
   <img src="example-images/3_standard_1.jpg" alt="" width="640" height="360" />
 </a>
</div>

<ul class="thumbnails">
 <li>
  <a href="example-images/3_zoom_1.jpg" data-standard="example-images/3_standard_1.jpg" id="img1_link">
   <img src="example-images/3_thumbnail_1.jpg" alt="" id="img1" />
  </a>
 </li>
 <li>
  <a href="example-images/3_zoom_2.jpg" data-standard="example-images/3_standard_2.jpg" id="img2_link">
   <img src="example-images/3_thumbnail_2.jpg" alt="" id="img2" />
  </a>
 </li>
</ul>

<a href="#" id="link1">Load set 1</a> &nbsp;<a href="#" id="link2">Load set 2</a>
<br /><br /><br /><br /><br />

<script>
	// 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'));
	});
	
	$("#link1").click(function (e){
		$("#img1").attr('src', "example-images/3_thumbnail_1.jpg");
		$("#img1_link").attr('href', "example-images/3_zoom_1.jpg");
		$("#img1_link").attr('data-standard', "example-images/3_standard_1.jpg");
		
		$("#img2").attr('src', "example-images/3_thumbnail_2.jpg");
		$("#img2_link").attr('href', "example-images/3_zoom_2.jpg");
		$("#img2_link").attr('data-standard', "example-images/3_standard_2.jpg");
		e.preventDefault();
	});
	
	$("#link2").click(function (e){
		$("#img1").attr('src', "example-images/3_thumbnail_3.jpg");
		$("#img1_link").attr('href', "example-images/3_zoom_3.jpg");
		$("#img1_link").attr('data-standard', "example-images/3_standard_3.jpg");
		
		$("#img2").attr('src', "example-images/3_thumbnail_4.jpg");
		$("#img2_link").attr('href', "example-images/3_zoom_4.jpg");
		$("#img2_link").attr('data-standard', "example-images/3_standard_4.jpg");
		e.preventDefault();
	});
</script>
</body>
</html>

但是，如果我，

加载页面
单击缩略图（此方法有效，它将加载正确的图像并进行缩放）
点击“负载组2”链接
点击缩略图

现在，它会加载第一组图像，而不是动态加载的图像

我尝试过， api1.teardown（）; api1._init（）; 在e.preventDefault（）之前的内部单击函数中，仍然没有运气。请帮忙。谢谢

更新

当我将api1.swap($this.data('standard'), $this.attr('href'));更改为api1.swap($this.attr('href'), $this.attr('href'));时，它起作用了（即使它将常规图像加载为缩放）。因此，看来data-standard属性未通过javascript正确更新。

EasyZoom动态更改的图像未加载

更新

0 个答案: