自己写了一个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($) {
相关推荐
蚂蚁RichLab前端团队5 分钟前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
扯淡的闲人9 分钟前
多语言编码Agent解决方案(5)-IntelliJ插件实现
开发语言·python
丑小鸭是白天鹅18 分钟前
Kotlin协程详细笔记之切线程和挂起函数
开发语言·笔记·kotlin
萌萌哒草头将军22 分钟前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
sali-tec27 分钟前
C# 基于halcon的视觉工作流-章34-环状测量
开发语言·图像处理·算法·计算机视觉·c#
java搬砖工-苤-初心不变28 分钟前
基于 lua_shared_dict 的本地内存限流实现
开发语言·junit·lua
Qlittleboy1 小时前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app
charlie1145141911 小时前
Kotlin 的 apply / with / run 详解
开发语言·kotlin·程序设计·面对对象
Tiger_shl1 小时前
【层面一】C#语言基础和核心语法-02(反射/委托/事件)
开发语言·c#
林_深时见鹿1 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js