自己写了一个jq的toast弹窗框架引入之后调用报错$.toast is not a function

toast.js

复制代码
(function($) {
$.toast = function(message) {
    var toast = $('#toast');
    toast.find('.toast-message').text(message);
    toast.fadeIn(function () {
        setTimeout(function () {
            toast.fadeOut();
        }, 3000); // 持续时间3秒
    })

    toast.click(function(){
        toast.fadeOut();
    })
}
})

页面是这样引入的

复制代码
<script src="./js/toast.js"></script>
复制代码
<div id="toast" style="display: none;">
    <div class="toast-message"></div>
</div>

<style>

复制代码
#toast{
    font-size: 14px;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 80%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    z-index: 99999;
}

</style>

使用

复制代码
$.toast('请输入要充值的抖音号')

却报错了$.toast is not a function

最后把js的地方(function($) {

改成

复制代码
jQuery(document).ready(function($) {
相关推荐
艾莉丝努力练剑1 小时前
【LeetCode&数据结构】单链表的应用——反转链表问题、链表的中间节点问题详解
c语言·开发语言·数据结构·学习·算法·leetcode·链表
工业甲酰苯胺5 小时前
TypeScript枚举类型应用:前后端状态码映射的最简方案
javascript·typescript·状态模式
倔强青铜35 小时前
苦练Python第18天:Python异常处理锦囊
开发语言·python
u_topian6 小时前
【个人笔记】Qt使用的一些易错问题
开发语言·笔记·qt
珊瑚里的鱼6 小时前
LeetCode 692题解 | 前K个高频单词
开发语言·c++·算法·leetcode·职场和发展·学习方法
AI+程序员在路上6 小时前
QTextCodec的功能及其在Qt5及Qt6中的演变
开发语言·c++·qt
xingshanchang7 小时前
Matlab的命令行窗口内容的记录-利用diary记录日志/保存命令窗口输出
开发语言·matlab
Risehuxyc7 小时前
C++卸载了会影响电脑正常使用吗?解析C++运行库的作用与卸载后果
开发语言·c++
AI视觉网奇7 小时前
git 访问 github
运维·开发语言·docker
不知道叫什么呀7 小时前
【C】vector和array的区别
java·c语言·开发语言·aigc