时间戳

首页 > 解决方案 > 未捕获的类型错误：$.simpleTicker 不是函数

javascript - 未捕获的类型错误：$.simpleTicker 不是函数

问题描述

当我调用 jQuery 函数时，显示错误： Uncaught TypeError: $.simpleTicker is not a function

我试图改变每个 jQuery 的 $ 但没有解决它。

这是我的 jQuery：

(function ($) {
    'use strict';

    $.simpleTicker($("#breakingNewsTicker"), {
        speed: 1000,
        delay: 3000,
        easing: 'swing',
        effectType: 'roll'
    });
    $.simpleTicker($("#internationalTicker"), {
        speed: 1000,
        delay: 4000,
        easing: 'swing',
        effectType: 'roll'
    });

})(jQuery);

! function(e) {
    e.simpleTicker = function(t, i) {
        var s = {
                speed: 1e3,
                delay: 3e3,
                easing: "swing",
                effectType: "slide"
            },
            n = {
                ul: "",
                li: "",
                initList: "",
                ulWidth: "",
                liHeight: "",
                tickerHook: "tickerHook",
                effect: {}
            },
            c = this;
        c.settings = {};
        e(t), t = t;
        c.init = function() {
            switch (c.settings = e.extend({}, s, i), n.ul = t.children("ul"), n.li = t.find("li"), n.initList = t.find("li:first"), n.ulWidth = n.ul.width(), n.liHeight = n.li.height(), t.css({
                height: n.liHeight
            }), n.li.css({
                top: "0",
                left: "0",
                position: "absolute"
            }), c.settings.effectType) {
                case "fade":
                    c.effect.fade();
                    break;
                case "roll":
                    c.effect.roll();
                    break;
                case "slide":
                    c.effect.slide()
            }
            c.effect.exec()
        }, c.effect = {}, c.effect.exec = function() {
            n.initList.css(n.effect.init.css).animate(n.effect.init.animate, c.settings.speed, c.settings.easing).addClass(n.tickerHook), t.find(n.li).length > 1 && setInterval(function() {
                t.find("." + n.tickerHook).animate(n.effect.start.animate, c.settings.speed, c.settings.easing).next().css(n.effect.next.css).animate(n.effect.next.animate, c.settings.speed, c.settings.easing).addClass(n.tickerHook).end().appendTo(n.ul).css(n.effect.end.css).removeClass(n.tickerHook)
            }, c.settings.delay)
        }, c.effect.fade = function() {
            n.effect = {
                init: {
                    css: {
                        display: "block",
                        opacity: "0"
                    },
                    animate: {
                        opacity: "1",
                        zIndex: "98"
                    }
                },
                start: {
                    animate: {
                        opacity: "0"
                    }
                },
                next: {
                    css: {
                        display: "block",
                        opacity: "0",
                        zIndex: "99"
                    },
                    animate: {
                        opacity: "1"
                    }
                },
                end: {
                    css: {
                        display: "none",
                        zIndex: "98"
                    }
                }
            }
        }, c.effect.roll = function() {
            n.effect = {
                init: {
                    css: {
                        top: "3em",
                        display: "block",
                        opacity: "0"
                    },
                    animate: {
                        top: "0",
                        opacity: "1",
                        zIndex: "98"
                    }
                },
                start: {
                    animate: {
                        top: "-3em",
                        opacity: "0"
                    }
                },
                next: {
                    css: {
                        top: "3em",
                        display: "block",
                        opacity: "0",
                        zIndex: "99"
                    },
                    animate: {
                        top: "0",
                        opacity: "1"
                    }
                },
                end: {
                    css: {
                        zIndex: "98"
                    }
                }
            }
        }, c.effect.slide = function() {
            n.effect = {
                init: {
                    css: {
                        left: 200,
                        display: "block",
                        opacity: "0"
                    },
                    animate: {
                        left: "0",
                        opacity: "1",
                        zIndex: "98"
                    }
                },
                start: {
                    animate: {
                        left: -200,
                        opacity: "0"
                    }
                },
                next: {
                    css: {
                        left: n.ulWidth,
                        display: "block",
                        opacity: "0",
                        zIndex: "99"
                    },
                    animate: {
                        left: "0",
                        opacity: "1"
                    }
                },
                end: {
                    css: {
                        zIndex: "98"
                    }
                }
            }
        }, c.init()
    }, e.fn.simpleTicker = function(t) {
        return this.each(function() {
            if (void 0 == e(this).data("simpleTicker")) {
                var i = new e.simpleTiecker(this, t);
                e(this).data("simpleTicker", i)
            }
        })
    }
}(jQuery);

这是我的 HTML：

<div class="breaking-news-area d-flex align-items-center">
    <div class="news-title">
        <p>Velho Gaúcho</p>
    </div>
    <div id="breakingNewsTicker" class="ticker">
        <ul>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
        </ul>
    </div>
</div>

<script src="../../vendor/components/jquery/jquery.min.js"></script>
<script src="../../vendor/twbs/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="../../dist/js/newsportal-js/plugins/plugins.js"></script>
<script src="../../dist/js/newsportal-js/popper.min.js"></script>
<script src="../../dist/js/newsportal-js/active.js"></script>

我从带有 jQ​​uery 版本 2 的项目中删除的 jQuery 代码，在当前项目中我使用的是版本 3。这可能是问题吗？

标签： javascriptjqueryhtml

解决方案

您没有添加 simpleTicker 插件 JS 和 css 文件。你的代码看到

$.simpleTicker

作为内置函数。它应该是这样的：

<link href="jquery.simpleTicker.css" rel="stylesheet">

然后是js文件

<script src="jquery.simpleTicker.js"></script>

推荐阅读