实现jQuery zoom hover插件出现语法错误 求排查修复方案

存在的问题 #

• JS语法错误：你对imageZoom插件的调用格式错误，$('.my-gallery').imageZoom()方法的参数需要是配置对象，你在配置对象的位置直接写了$(this).imageZoom()的调用逻辑，不符合JS语法规范，这就是VSCode提示「'{' expected」的直接原因。同时你嵌套了两层DOM就绪监听：$(document).ready(function(){})和$(function(){})是完全等价的写法，重复嵌套属于冗余代码。
• HTML属性错误：包裹图片的div标签重复定义了class属性，多个class属性只会生效最后一个，需要合并为同一个属性。
• 插件调用逻辑错误：不需要嵌套调用两次imageZoom方法，直接给目标元素传入配置参数即可。

修正后的代码 #

JS代码 #

$(function(){
  // 直接给画廊容器调用插件，传入配置对象
  $('.my-gallery').imageZoom({
    zoom: 200
  });
});

HTML代码 #

<!-- 资源引入 -->
<link rel="stylesheet" href="{% static 'click-tap-image/dist/css/image-zoom.css' %}" />
<script src="{% static 'click-tap-image/dist/js/image-zoom.min.js' %}"></script>

<!-- 画廊结构 -->
<div class="slider-for m-2 my-gallery">
  <img src="{% static 'images/product1.png' %}" width="80" class="gallery-image">
  <img src="{% static 'images/product2.png' %}" width="80" class="gallery-image">
  <img src="{% static 'images/product3.png' %}" width="80" class="gallery-image">
  <img src="{% static 'images/product4.png' %}" width="80" class="gallery-image">
  <img src="{% static 'images/product5.png' %}" width="80" class="gallery-image">
  <img src="{% static 'images/product3.png' %}" width="80" class="gallery-image">
</div>

内容的提问来源于stack exchange，提问作者Yabesh