Liquid/Shopify：我如何在页面中添加jQuery？

问题描述：

我很难将外部jQuery库集成到我自己的液体页面中。我想用CDN加载它。Liquid/Shopify：我如何在页面中添加jQuery？

在theme.liquid页面我加载JavaScript这样：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
{{ 'spot-the-ball.js' | asset_url | script_tag }}

里面的spot-the-ball.js我有一个纯JavaScript .onload功能是workig。然后我有以下jQuery不工作：

$('.coords').mousemove(function (e) { 
       // console.log(e.clientX); 
       // var x = ((e.clientX - left)/width).toFixed(1), 
       //  y = ((height - (e.clientY - top))/height).toFixed(1); 

        x = e.clientX - 50; 
        y = e.clientY - 50; 

       $(tooltip).text(x + ', ' + y).css({ 
        left: e.clientX - 30, 
        top: e.clientY - 30 
       }).show(); 
      }); 

$('.coords').mouseleave(function() { 
       $(tooltip).hide(); 
      }); 

    $(".coords").mouseup(function(){ 
     $('.yourcoordinates').append("X:",x," Y:",y) 
    }); $('.coords').mousemove(function (e) { 
       // console.log(e.clientX); 
       // var x = ((e.clientX - left)/width).toFixed(1), 
       //  y = ((height - (e.clientY - top))/height).toFixed(1); 

        x = e.clientX - 50; 
        y = e.clientY - 50; 

       $(tooltip).text(x + ', ' + y).css({ 
        left: e.clientX - 30, 
        top: e.clientY - 30 
       }).show(); 
      }); 

$('.coords').mouseleave(function() { 
       $(tooltip).hide(); 
      }); 

    $(".coords").mouseup(function(){ 
     $('.yourcoordinates').append("X:",x," Y:",y) 
    });

检查是否有在开发者控制台中的任何错误，然后写一个简单的'的console.log（“测试”）检查JS是否被加载，然后检查目标元素是否实际加载，然后将目标设置为console.log（$（'.coords'）.length）'。 99％的时间你会以这种方式找到问题。 – drip

是的，有错误，我要回答我自己的问题，所以每个人都可以看到解决方案。谢谢 –

答

我在项目中有另一个js文件正在使用旧版本的jQuery。控制台显示错误。我加载了一个较旧的CDN，现在一切正常。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js" type="text/javascript"></script>

答

你可以把这个在你的模板，例如theme.liquid：

{{ '//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js' | script_tag }}

是的，这就是我所做的。即使没有液体sintax，它也可以工作，只是普通的

Liquid/Shopify：我如何在页面中添加jQuery？

相关推荐