自己写了一个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($) {
相关推荐
Python×CATIA工业智造3 小时前
Frida RPC高级应用:动态模拟执行Android so文件实战指南
开发语言·python·pycharm
我叫小白菜4 小时前
【Java_EE】单例模式、阻塞队列、线程池、定时器
java·开发语言
狐凄4 小时前
Python实例题:基于 Python 的简单聊天机器人
开发语言·python
weixin_446122465 小时前
JAVA内存区域划分
java·开发语言·redis
悦悦子a啊5 小时前
Python之--基本知识
开发语言·前端·python
QuantumStack6 小时前
【C++ 真题】P1104 生日
开发语言·c++·算法
whoarethenext6 小时前
使用 C++/OpenCV 和 MFCC 构建双重认证智能门禁系统
开发语言·c++·opencv·mfcc
OEC小胖胖6 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水7 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
代码的奴隶(艾伦·耶格尔)7 小时前
后端快捷代码
java·开发语言