自己写了一个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($) {
相关推荐
weixin-a153003083163 分钟前
[数据抓取-1]beautifulsoup
开发语言·python·beautifulsoup
quweiie34 分钟前
thinkphp8+layui多图上传,带删除\排序功能
前端·javascript·layui
小杨同学yx42 分钟前
有关maven的一些知识点
java·开发语言
闲蛋小超人笑嘻嘻43 分钟前
树形结构渲染 + 选择(Vue3 + ElementPlus)
前端·javascript·vue.js
重生之我要当java大帝1 小时前
java微服务-尚医通-编写医院设置接口下
java·开发语言·sql
寻找华年的锦瑟1 小时前
Qt-QDir
开发语言·qt
巴博尔1 小时前
uniapp的IOS中首次进入,无网络问题
前端·javascript·ios·uni-app
焚 城1 小时前
UniApp 实现双语功能
javascript·vue.js·uni-app
小妖6661 小时前
vscode 怎么运行 c++ 文件
开发语言·c++
weixin_307779131 小时前
在 Microsoft Azure 上部署 ClickHouse 数据仓库:托管服务与自行部署的全面指南
开发语言·数据库·数据仓库·云计算·azure