自己写了一个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($) {
相关推荐
MChine慕青10 小时前
顺序表与单链表:核心原理与实战应用
linux·c语言·开发语言·数据结构·c++·算法·链表
qq_1955516910 小时前
代码随想录70期day7
java·开发语言
每天吃饭的羊11 小时前
state和ref
前端·javascript·react.js
GEO_YScsn11 小时前
Vite:Next-Gen Frontend Tooling 的高效之道——从原理到实践的性能革命
前端·javascript·css·tensorflow
GISer_Jing11 小时前
滴滴二面(准备二)
前端·javascript·vue·reactjs
摇滚侠11 小时前
Vue3入门到实战,最新版vue3+TypeScript前端开发教程,笔记03
javascript·笔记·typescript
GISer_Jing11 小时前
滴滴二面准备(一)
前端·javascript·面试·ecmascript
lecepin11 小时前
AI Coding 资讯 2025-09-10
前端·javascript·面试
书源11 小时前
灵活性和可维护性,被严重低估的编程原则
前端·javascript·vue.js
sinat_6020353612 小时前
模块与包的导入
运维·服务器·开发语言·python