Question

我为index.cshtml创建了一个函数，并在index.js中写了这个文件，这个文件使用了Typed.js库，但它找不到它。我包括了typed.js和typed.min.js。我应该链接脚本而不是index.cshtml中的_layout文件吗？

这是我的_layout.cshtml：

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="~/Scripts/typed.min.js"></script>
    <script src="~/Scripts/index.js" type="text/javascript"></script>
   
    

    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
   
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            
            <img src="~/Content/images/atoslogo.png" class="img-responsive" style="height: 100px" />
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    <script src="~/signalr/hubs"></script>
    @RenderSection("scripts", required: false)
    
</body>

</html>

＆＃13;

函数本身（index.js）：

＆＃13;

function typerJS() {
    if (counter == 0) {
        setTimeout(function () {
            $(".element0").typed({
                strings: ["Wachten op de eerste sensordata... (0/3)"],
                typeSpeed: 30, // typing speed
                backDelay: 750, // pause before backspacing
                loop: false, // loop on or off (true or false)
                loopCount: false, // number of loops, false = infinite
                callback: function () { } // call function after typing is done
            });
        }, 0);
    }
    if (counter == 1) {
        setTimeout(function () {
            $(".element1").css("display", "inherit");
            $(".element1").typed({
                strings: ["Wachten op de eerste sensordata...(1/3)"],
                typeSpeed: 30, // typing speed
                backDelay: 750, // pause before backspacing
                loop: false, // loop on or off (true or false)
                loopCount: false, // number of loops, false = infinite
                callback: function () { } // call function after typing is done
            });
        }, 2000);
    }

    if (counter == 2) {
        setTimeout(function () {
            $(".element2").css("display", "inherit");
            $(".element2").typed({
                strings: ["Wachten op de eerste sensordata... (2/3)"],
                typeSpeed: 30, // typing speed
                backDelay: 750, // pause before backspacing
                loop: false, // loop on or off (true or false)
                loopCount: false, // number of loops, false = infinite
                callback: function () { } // call function after typing is done
            });
        }, 4000);
    }

    if (counter == 3) {
        setTimeout(function () {
            $(".element3").css("display", "inherit");
            $(".element3").typed({
                strings: ["Wachten op de eerste sensordata...(3/3)"],
                typeSpeed: 30, // typing speed
                backDelay: 750, // pause before backspacing
                loop: false, // loop on or off (true or false)
                loopCount: false, // number of loops, false = infinite
                callback: function () { } // call function after typing is done
            });
        }, 6000);
    }

    if (counter == 3) {
        setTimeout(function () {
            $(".element4").css("display", "inherit");
            $(".element4").typed({
                strings: ["U wordt zo spoedig mogelijk doorgestuurd.."],
                typeSpeed: 30, // typing speed
                backDelay: 750, // pause before backspacing
                loop: false, // loop on or off (true or false)
                loopCount: false, // number of loops, false = infinite
                callback: function () { } // call function after typing is done
            });
        }, 6000);
    }
}

＆＃13;

我得到的错误：

有谁知道我做错了什么？在此先感谢!!

Answer 1

现在我查了Typed.js并查看了文档。这花了我不到一分钟。

您的问题是，您想使用Typed.js并使用了jQuery。

Typed.js的示例设置如下所示：

var typed = new Typed('.element', {
    strings: [
        "First sentence.",
        "Second sentence."
    ],
    typeSpeed: 30
});

所以你只需要查看手册然后正确使用它。

对你而言，这意味着：

只需使用您已有的代码，然后使用new Typed("x", ...)代替$("x").typed(...)。

new Typed("element0", {
    strings: ["Wachten op de eerste sensordata... (0/3)"], 
    typeSpeed: 30, // typing speed
    backDelay: 750, // pause before backspacing
    loop: false, // loop on or off (true or false)
    loopCount: false, // number of loops, false = infinite
    callback: function () { } // call function after typing is done
});

Answer 2

使用此CDN的

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/typed.js/1.1.4/typed.min.js"></script>

并使用以下外部脚本：

     $(document).ready(function(){
     $("#hero").typed({
                strings: [val.quote],
                typeSpeed: 110, // typing speed
                backDelay: 500, // pause before backspacing
                loop: trueenter code here
            });
});

Typed.js不会在ASP.NET

2 个答案: