如何解决如何在我的 Next.Js 应用程序中正确使用这个 jQuery 脚本?
我有这个脚本,我使用的是一个纯 HTML 网站,并通过 <script>
标签导入它:
(function($) {
var wa_time_out,wa_time_in;
$(document).ready(function() {
$(".wa__btn_popup").on("click",function() {
if ($(".wa__popup_chat_box").hasClass("wa__active")) {
$(".wa__popup_chat_box").removeClass("wa__active");
$(".wa__btn_popup").removeClass("wa__active");
clearTimeout(wa_time_in);
if ($(".wa__popup_chat_box").hasClass("wa__lauch")) {
wa_time_out = setTimeout(function() {
$(".wa__popup_chat_box").removeClass("wa__pending");
$(".wa__popup_chat_box").removeClass("wa__lauch");
},400);
}
} else {
$(".wa__popup_chat_box").addClass("wa__pending");
$(".wa__popup_chat_box").addClass("wa__active");
$(".wa__btn_popup").addClass("wa__active");
clearTimeout(wa_time_out);
if (!$(".wa__popup_chat_box").hasClass("wa__lauch")) {
wa_time_in = setTimeout(function() {
$(".wa__popup_chat_box").addClass("wa__lauch");
},100);
}
}
});
function setCookie(cname,cvalue,exdays) {
var d = new Date();
d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
var expires = "expires=" + d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(";");
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == " ") {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length,c.length);
}
}
return "";
}
$("#nta-wa-gdpr").change(function() {
if (this.checked) {
setCookie("nta-wa-gdpr","accept",30);
if (getCookie("nta-wa-gdpr") != "") {
$('.nta-wa-gdpr').hide(500);
$('.wa__popup_content_item').each(function(){
$(this).removeClass('pointer-disable');
$('.wa__popup_content_list').off('click');
})
}
}
});
if (getCookie("nta-wa-gdpr") != "") {
$('.wa__popup_content_list').off('click');
} else{
$('.wa__popup_content_list').click(function(){
$('.nta-wa-gdpr').delay(500).css({"background" : "red","color" : "#fff"});
});
}
});
})(jQuery);
我在 cdn 上导入了 jQuery,把它放在 </head>
之前:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
我需要在我的 NextJS 应用上使用它。
我尝试将相同的脚本放在 /public/static/script.js
上的文件中
然后像这样在我的 _app.js
上导入:
<Head>
<script type="text/javascript" src="/static/script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</Head>
还尝试了我在谷歌和这里看到的其他一些方法,但都没有奏效。我该如何正确地做到这一点?
解决方法
您可以按照以下步骤操作
安装 jquery
npm install jquery
loader.js
//loader.js
window.$ = window.jQuery = require('jquery')
之后,jquery 也能正常工作
import '[LoaderPath]/loader.js'
...
const handleForm = () => {
$("#date").val("data");
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。