Blazor服务器端-_Host.cshtml中js文件引用的位置

问题描述

我有尝试使用的动画，但是我的问题是，如果我以我认为应该拥有的方式获得引用，它们将无法工作。我可以使它们工作，但是默认Blazor项目中包含的“计数器”页面不起作用-计数器未计数，这表明存在严重错误，我也将遇到其他问题。动画JavaScript位于名为bs-init.js的文件中。

方案一：

<head>
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
    <link href="css/site.css" rel="stylesheet" />
    <script src="_framework/blazor.server.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bs-init.js"></script>
</head>
<body>
    <app>
        <component type="typeof(App)" render-mode="ServerPrerendered" />
    </app>
</body>
</html>

问题：动画有效，但计数器无效。

方案二：

<head>
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
    <link href="css/site.css" rel="stylesheet" />
</head>
<body>
    <app>
        <component type="typeof(App)" render-mode="ServerPrerendered" />
    </app>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="_framework/blazor.server.js"></script>
    <script src="js/bs-init.js"></script>
</body>
</html>

问题：计数器有效，但动画无效。

我的bs-init.js文件的内容是这样的：

$(document).ready(function(){
    $('[data-bs-hover-animate]')
        .mouseenter( function(){ var elem = $(this); elem.addClass('animated ' + elem.attr('data-bs-hover-animate')) })
        .mouseleave( function(){ var elem = $(this); elem.removeClass('animated ' + elem.attr('data-bs-hover-animate')) });
});

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

blazor javascript