Question

我在 wordpress 短代码中编写以下代码：

$(function () {

    function setFlatTheme() {
        $("body").toggleClass("flat-theme");
        $("#rad-color-opts").toggleClass("hide");
        $(".rad-chk-pin input[type=checkbox]").prop("checked", true);
    }

    setFlatTheme();

    $(window).on("scroll", function (e) {
        if ($(window).scrollTop() > 50) {
            $("body").addClass("sticky");
        } else {
            $("body").removeClass("sticky");
        }
    });

    $(document).on("click", function (e) {
        e.preventDefault();
        var $item = $(".rad-dropmenu-item");
        if ($item.hasClass("active")) {
            $item.removeClass("active");
        }
    });

    $(".rad-sidebar a").on("click", function (e) {
        e.stopPropagation();
    });

    $(".rad-chat-body").slimScroll({
        height: "450px",
        color: "#c6c6c6"
    });

    $(".rad-timeline-body").slimScroll({
        height: "450px",
        color: "#c6c6c6"
    });

    $(".rad-activity-body").slimScroll({
        height: "250px",
        color: "#c6c6c6"
    });

    $(".rad-toggle-btn").on("click", function () {
        $(".rad-logo-container").toggleClass("rad-nav-min");
        $(".rad-sidebar").toggleClass("rad-nav-min");
        $(".rad-body-wrapper").toggleClass("rad-nav-min");
    });

    $("li.rad-dropdown > a.rad-menu-item").on("click", function (e) {
        e.preventDefault();
        e.stopPropagation();
        $(".rad-dropmenu-item").removeClass("active");
        $(this).next(".rad-dropmenu-item").toggleClass("active");
    });

    $(".fa-chevron-down").on("click", function () {
        var $ele = $(this).parents(".panel-heading");
        $ele.siblings(".panel-footer").toggleClass("rad-collapse");
    });

    $(".fa-close").on("click", function () {
        var $ele = $(this).parents(".panel");
        $ele.addClass("panel-close");
    });

    $(".fa-rotate-right").on("click", function () {
        var $ele = $(this).parents(".panel-heading").siblings(".panel-body");
        $ele.append(
            '<div class="overlay"><div class="overlay-content"><i class="fa fa-refresh fa-2x fa-spin"></i></div></div>'
        );
    });

    $("#rad-chat-send").on("click", function () {
        var value = $("#rad-chat-txt").val();
        var $ele = $(".rad-chat-body");
        var img =
            "https://lh4.googleusercontent.com/-GXmmnYTuWkg/AAAAAAAAAAI/AAAAAAAAAAA/oK6DEDS7grM/w56-h56/photo.jpg";
        
        if (value) {
            $("#rad-chat-txt").val("");
            $ele.append(getTempl(img, value, "left"));
            
            $ele.slimScroll({
                scrollTo: $ele[0].scrollHeight
            });
        }
    });

    $(".rad-chk-pin input[type=checkbox]").change(function (e) {
        $("body").toggleClass("flat-theme");
        $("#rad-color-opts").toggleClass("hide");
        var selectedTheme = $(".rad-color-swatch input[type=radio]:checked");
        var fillColor = '#C6C6C6';
        var scale = ["#C8EEFF", "#0071A4"];

        if (this.checked) {
            scale = ["#A8ECFF", "#FA71D4"];
            fillColor = colorMap[selectedTheme.val()];
        }
        
        changeMapColors(fillColor, scale);
    });
    

    var colorMap = {
        crimson: "crimson",
        teal: "#1fb5ad",
        orange: "#ff503f",
        purple: "rebeccapurple",
        twitter: "#55acee"
    };

    $(".rad-color-swatch input[type=radio]").change(function (e) {
        if ($(".rad-chk-pin input[type=checkbox]").is(":checked")) {
            $("body").removeClass().addClass("flat-theme").addClass(this.value);
            $(".rad-color-swatch label").removeClass("rad-option-selected");
            $(this).parent().addClass("rad-option-selected");
            $(window).scrollTop(0);
        }
    });

    $(".rad-notification-item").on("click", function (e) {
        e.stopPropagation();
    });

});

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet"> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-slimScroll/1.3.3/jquery.slimscroll.min.js"></script>


<section>
    <header>
        <nav class="rad-navigation">
            <div class="rad-logo-container rad-nav-min">
                <a href="#" class="rad-logo"><img src="https://xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" class="tamimg"><span class="letra">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span></a>
                <a href="#" class="rad-toggle-btn pull-right"><i class="fa fa-bars acertobar"></i></a>
            </div>
            <a href="#" class="rad-logo-hidden">xxxxxxxxxxxxxxxxxxxxxxxxxx</a>
            <div class="rad-top-nav-container">
                <ul class="pull-right links">
                        
                </ul>
                <ul class="pull-right links">
                    <li>
                        <span style="font-size: 24px; color: #31547c; font-weight: 600;">xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>
                    </li>
                </ul>
            </div>
        </nav>
    </header>
</section>
<aside>
    <nav class="rad-sidebar rad-nav-min">
        <ul>
            <li>
                <a href="https://xxxxxxxxxxxxxxxxxxxxx" class="inbox">
                    <i class="fa fa-home acerto"><span class="icon-bg"></span></i>
                    <span class="rad-sidebar-item">HOME</span>
                </a>
            </li>
            <li>
                <a href="https://xxxxxxxxxxxxxxxx.pt/teste.php">
                    <i class="fa fa-bar-chart-o">
                        <span class="icon-bg"></span>
                    </i>
                    <span class="rad-sidebar-item">INSCRIÇÃO</span>
                </a>
            </li>
        </ul>
    </nav>
</aside>
<main>

</main>

但是当我查询控制台时，它返回这些错误：

<块引用>

jQuery.Deferred 异常：$(...).slimScroll is not a function TypeError: $(...).slimScroll is not a function 在 HTMLDocument。 (:33:22) 在 e (https://xxxxxxxxxxxxxxxxxxx.pt/wp-includes/js/jquery/jquery.min.js?ver=3.5.1:2:30005) 在 t (https://xxxxxxxxxxxxxx.pt/wp-includes/js/jquery/jquery.min.js?ver=3.5.1:2:30307) 未定义

<块引用>

未捕获的类型错误：$(...).slimScroll 不是函数在 HTMLDocument 中。

<块引用>

未捕获的类型错误：无法读取未定义的属性“选项”

有人可以帮忙吗？

Answer 1

我的猜测是代码可能在页面完全加载之前运行，尝试这样做

window.onload = function() {

}

或

jQuery.ready(function() {

}

执行短代码时出现控制台错误

1 个答案: