javascript - Bootstrap 开关未在 View 中呈现

Question

我正在尝试在 View 中使用 Bootstrap 开关，因此在我的布局文件中我已经引用了所需的文件。

_Layout.Cshtml

标题

<link rel="stylesheet" href="~/css/bootstrap-switch.css" />

页脚

<script src="~/js/bootstrap-switch.js"></script>

但在我看来我有

  @Html.CheckBox("DisableBuyButton", true)

然后在布局页面的页脚中有以下内容

 $("[name='DisableBuyButton']").bootstrapSwitch();

但我在我的 google chrome 检查器中得到以下信息

如您所见，它显示了意外的 token 导入，当我点击进入错误时，它会将我带到这一行。我不需要 jquery，所以希望有人能帮助我。

import jquery from 'jquery';

有人知道哪里出了问题吗

编辑 2 我已经摆脱了那些错误，但上面的错误仍然存​​在。

编辑3

好的，现在我使用了 cdn 及其工作原理，但它把两个开关放在一起。

当我清楚地在代码中将它们分开时

 <script>
      $(document).ready(function () {
          $("[name='DisableBuyButton']").bootstrapSwitch();
          $("[name='IsRental']").bootstrapSwitch();

       });
</script>


<div class="col-md-10">
 <div class="form-group">
       Disable By Button
          <input type="checkbox" asp-for="DisableBuyButton" id="DisableBuyButton" />

   </div>
    <div class="form-group">

       <input type="checkbox" asp-for="IsRental" id="IsRental" />Is Rental

    </div>

Answer 1

由于错误是在 import 时在浏览器中抛出的，我猜你正在使用 this ES6+ version Bootstrap 开关。除非你有像 babel 这样的转译器，否则它不会在浏览器上工作。

所以使用this version它具有 ES5 语法，目前已被浏览器支持。

(注意:Chrome 的最新版本支持 ES6 modules and classes natively )