Question

我遗漏了一些简单的东西，却找不到它。在我的asp.net MVC5项目中，我想使用bootstrap-switch。这就是我所做的：

BundleConfig.cs：添加了bootstrap-switch.css和bootstrap.switch.js，如下所示，

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.js",
                  "~/Scripts/respond.js",
                  "~/Scripts/bootstrap-switch.js"));

bundles.Add(new StyleBundle("~/Content/css").Include(
                  "~/Content/bootstrap.css",
                  "~/Content/bootstrap-switch.css",
                  "~/Content/site.css"));

（并确保文件位于这些位置）。

然后，在视图中我尝试了以下三个复选框，

<input type="checkbox" class="switch" />
<input type="checkbox" class="switch" name="box" />
<input type="checkbox" 
    data-on-text="Option A"
    data-off-text="Option B"
    data-size="mini"
    name="box2" />

并在视图文件的底部添加

<script>
    $("[name='box']").bootstrapSwitch();
    $("[name='box2']").bootstrapSwitch();
</script>

但是当我运行项目时，复选框看起来像标准复选框（没有CSS，或者已经添加了功能）。

我已经阅读了很多帖子（我的代码跟http://www.bootstrap-switch.org/一字不差），但找不到我的错误。

Answer 1

迟到且显而易见，但也许对某人有用。当文档准备就绪时，需要初始化复选框。

<script>
    $(document).ready(function() {
        $("[name='box']").bootstrapSwitch();
        $("[name='box2']").bootstrapSwitch();
    });
</script>

Answer 2

问题在于，如果在包中包含js文件，它将在页面上最后呈现。因此，如果您在视图上使用javascipt引用了包中加载的.js库，则将其放在视图文件的末尾不起作用，而是呈现脚本部分，

@section scripts{
    <script>
        $(".indent-1").css("background", "green");
    </script>
}

导入库后，这将出现在html文件中。

如何初始化bootstrapSwitch（）？

2 个答案: