Question

快速介绍：我使用jQuery.elevateZoom-3.0.8来显示缩放图片。

SRC属性是较小/正常图像的路径
DATA-ZOOM-IMAGE属性是用作缩放的较大图像的路径。

下面的HTML代码：

  <section id="designer-single" class="col-md-7" >
    <div class="magnifier-thumb-wrapper mc">
      <img class="front-magnify"  
      src="../../public/img/burn/purple-front.png"
      data-zoom-image="../../public/img/burn/purple-front-lg.png">
    </div>
 </section>
 <button class='back-image'>Click me</button>

现在我想要在用户按下按钮时更改图像。较小的图像将更改（SRC属性），但更大的图像将不会刷新（数据缩放图像属性），即使我使用jQuery更改它。

$('.back-image').on('click', function(){
    $('.front-magnify').attr('src', 'public/img/burn/purple-back.png');
    $('.front-magnify').attr('data-zoom-image', 'public/img/burn/purple-back-lg.png');
});

问题是：如何在elevateZoom.js中更新自定义属性＆＃34; data-zoom-image＆＃34; 的状态，以便在 DOM上更新？

https://i.stack.imgur.com/hFvG7.png =＆gt;没有点击

https://i.stack.imgur.com/r0tUw.png =＆gt;在改变时

Codepen上的示例： https://codepen.io/kenanbalija/pen/MojOEp

Answer 1

似乎可能出现的问题是您成功更改了属性，但elevateZoom.js中的代码是基于原始值启动的，并且不会监视更改。

根据您在下面的评论并快速查看插件源代码，我之前的猜测（通过再次调用.elevateZoom重新启用插件，或使用responsive选项）不会工作。这是一个一次性的插件，它实际上并不是为了在实例化后可控制而设计的，所以你的选择非常有限。

你可以蛮力破坏现有的插件（通过移除整个DOM元素），然后再用新的插件替换它并重新安装插件。

或者，由于您似乎在两个不同的可缩放图像之间切换，因此可以更简单地将它们分别实例化并根据需要隐藏/显示每个图像

$('.image').on('click', function(){
  $('.front-magnify, .back-magnify').toggleClass('hidden');
})

当然，这是带宽和代码复杂性之间的权衡。

使用jQuery更改自定义属性源不会更新它

1 个答案: