bootstrap-switch插件使用之初始化踩坑

最新推荐文章于 2024-10-18 11:31:46 发布

stormApple

最新推荐文章于 2024-10-18 11:31:46 发布

阅读量6.9k

点赞数 1

分类专栏：其他文章标签： bootstrap-switch 初始化踩坑

本文链接：https://blog.csdn.net/swust_wangyubo/article/details/80797319

版权

其他专栏收录该内容

10 篇文章 0 订阅

订阅专栏

最近项目里要使用一个开关按钮，网上一搜bootstrap-switch正是我想要的。美观大方，使用简单，简直完美。

当然我写这篇博客不是为了介绍使用方法的，使用方法网上官网以及各大博主大同小异的帖子很多，但是很多人都没有遇到我的问题，以至于这个问题又是困扰了我一个多星期。

前言：本身bootstrap-switch使用非常简单，引用相应的js和css文件，把checkbox放进class为“switch”的div中，再在页面加载完成后初始化一下元素。

<!DOCTYPE html>  
<html>  
<head lang="en">  
    <meta charset="UTF-8">  
    <title>this is a bootstrap-switch test</title>  
    <script src="jquery-2.2.4.js"></script>  
    <script src="bootstrap.js"></script>  
    <script src="bootstrap-switch.js"></script>  
    <link rel="stylesheet" type="text/css" href="bootstrap.css"/>  
    <link rel="stylesheet" type="text/css" href="bootstrap-switch.css"/>  
    <script type="text/javascript">  
        $(function(){  
            $('#mySwitch input').bootstrapSwitch({  
                onText:'On',  
                offText:'Off'
            });  
        })  
    </script>  
</head>  
<body>  
<br>  
<div class="switch"  id="mySwitch">  
    <input type="checkbox" checked  data-on-text="YES" data-off-text="NO"/>  
</div>  
</body>  
</html>

问题描述：页面加载完成后，我要把按钮初始化到不同的状态，可是无论怎么搞页面按钮始终处于关闭状态，控制台打印按钮的状态值，确实是不同的开关状态，没有问题。于是我就踏上了漫漫debug之路。

第一步，我怀疑是自己使用bootstrap-switch的姿势不对，无论是官网还是各种黑科技博主的帖子里介绍的办法，使用后问题依旧。最终我倾向于使用官网的例子。至于那些抄来抄去的黑科技帖子，狗带去吧。

第二步，接着我怀疑是项目引用的资源文件有问题，重新下载了依赖文件，比如jQuery，bootstrap。jQuery从2.0开始不再支持IE678，bootstrap也从3.0开始不再支持IE678，在使用时需要注意一下。我换了对应的文件，并单独在使用bootstrap-switch插件的页面应用，问题依旧。失败。

第三步，我已近有点抓狂了，建了一个新的项目，里面单独使用bootstrap-switch控件，类似上面的例子一样，是没有问题的。那说明是我现有的项目有问题。到这里问题的范围终于缩小了，就是这个项目的事，我准备一步一步来分解项目：

1）我把原有项目里的东西放进新项目，一点一点减少，让他往最简的demo上靠。终于当我把原本是在弹出框里面初始化的内容，直接放到页面上的时候，初始化工作终于正常了。（泪目）

2）这个弹出框用的modal框，应该是modal这个属性影响到它了。我把modal换成一个普通的panel总可以了吧，没想到点开之后，跟modal窗口一样的问题！

3）正当我心灰意冷之际，我顺手关闭重新打开的时候，这个显示结果竟然正常了。有门，我把整个switch的初始化工作从onload里面放到窗口的打开事件里，这样，每次打开就都正常了。问题阶段性解决。

最后，简单总结一下就是：modal窗口可能由于某些原因，初始化操作中修改样式等操作还没有执行就被终止了。使用普通的div做这种操作，要注意初始化的时机，执行的过早，可能没有执行完被终止或者覆盖。

20190108补充：有朋友在评论询问，可能我正文里面说的不清楚：大家习惯上都是把页面上的初始化操作放在onload里面，以往的经验告诉我们这也没什么问题；但这个插件就不行，如果把按钮初始化的代码放在onload里面，就各种问题。后来我在onload里面不做bootstrap-switch插件相关的初始化。因为我的switch按钮是在一个弹出窗口里的，我把初始化内容推迟到打开弹出窗口的时候才做，就规避了这些莫名其妙的问题。