zoom jquery插件失效

zoom jquery插件失效


<script style="display:none">
    $(document).ready(function(){
        $('#zoom28944056975609').zoom({ on:'click' });             
    });
script>  
<span class="zoom" id="zoom28944056975609">
  < img src="//cdn.shopify.com/s/files/1/0253/9752/6580/products/06_13374989-f60f-45b9-89c9-b500d4a41b08_1000x.jpg?v=1640328299" width="600" class="zoomzoomimg">
span>  
 li>ul>
          <div class="slider-buttons no-js-hidden mobimgbtn quick-add-hidden">
            <button type="button" class="slider-button slider-button--prev" name="previous" aria-label="Slide left">
              <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-caret" viewBox="0 0 10 6">
  <path fill-rule="evenodd" clip-rule="evenodd" d="M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 000-.708z" fill="currentColor">
path>svg>

            button>
            <div class="slider-counter caption small-hide">
              <span class="slider-counter--current">1span>
              <span aria-hidden="true"> / span>
              <span class="visually-hidden">ofspan>
              <span class="slider-counter--total">8span>
            div>
            <button type="button" class="slider-button slider-button--next" name="next" aria-label="Slide right">
              <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-caret" viewBox="0 0 10 6">
  <path fill-rule="evenodd" clip-rule="evenodd" d="M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 000-.708z" fill="currentColor">
path>svg>

            button>
          div>
        slider-component>

看控制台插件是否正常加载，特别是引用到了谷歌cdn，在国内是打不开的，一个项目中的报错

img

该回答引用GPTᴼᴾᴱᴺᴬᴵ
根据提供的代码，你需要在 标签内引入 jQuery 库，否则 $ 符号将无法识别。可以尝试在 标签内添加以下代码：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

然后，再将 $(document).ready() 的代码放在 标签内即可。最终的代码如下所示：

<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <script style="display:none">
    $(document).ready(function(){
      $('#zoom28944056975609').zoom({ on:'click' });
    });
  </script>
  <span class="zoom" id="zoom28944056975609">
    <img src="//cdn.shopify.com/s/files/1/0253/9752/6580/products/06_13374989-f60f-45b9-89c9-b500d4a41b08_1000x.jpg?v=1640328299" width="600" class="zoomzoomimg">
  </span>
</body>

如果问题仍然存在，可以尝试在浏览器控制台查看错误信息并进行调试。

您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！
PS：问答VIP年卡 【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632