我很难将外部 jQuery 库集成到我自己的 Liquid 页面中。我想使用 CDN 加载它。
在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
函数,可以正常工作。然后我有以下 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)
});
最佳答案
我的项目中有另一个 js 文件,该文件正在使用旧版本的 jQuery。控制台显示错误。 我加载了一个较旧的 CDN,现在一切正常。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js" type="text/javascript"></script>
关于javascript - 液体/Shopify : how I add jQuery to the page?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46658527/