解决bootstrap-switch开关按钮不能正常初始化问题

从 GitHub - Bttstrp/bootstrap-switch: Turn checkboxes and radio buttons in toggle switches. 下来bootstrap-switch插件,将其中dist目录下的css、js拷贝到项目,引用对应的css和js,然后在body中随便加上开关按钮的checkbox

<input type="checkbox" checked class="switch-checkbox" id="id-abc" />

注意,input中添加了 checked ,按照官方介绍,初始化理该处于选中状态,但使用github上的js文件,不管怎么弄,都是处于未选中状态,而使用

$(".checkbox").bootstrapSwitch('state', true)

代码却能使开关按钮正常显示为选中状态,在firefox进行debug,发现其包装div的class中含有好几个 bootstrap-switch-undefined ,这又是什么鬼?不是说国外程序员严谨吗?初步判断作者故意留一手,没大毛病,基本能使用,但细节上却故意整个bug出来。

然,再使用官方demo https://jsfiddle.net/djibe89/vL87w0j8/  中的 https://cdn.jsdelivr.net/gh/djibe/bootstrap-switch/dist/js/bootstrap-switch.min.js  此文件却一切正常(不使用js设置state也能正常初始化为选中状态),再次验证作者故意挖坑。对比demo中的js文件,发现与github上的js文件有些许不同,代码风格大体相同,但整体代码简化的写法上却完全不同,不知道是不是一个作者写的?????

继续在firefox中debug,首先把bootstrap-switch-undefined这几个玩意解决了,伤脑细胞啊,自己太较劲,本来是用demo中的那个min.js文件就行了,奈何吾过于顽固,坚决要填平作者挖下的坑……找啊找,找啊找……终于在bootstrap-switch.js源文件中找到getClasses函数,此就是为checkbox包装div设置各种class的地方,当然,此函数不负责设置class,但负责获取该设置的哪些class集合,断点到此函数中,发现其中 return v == null 这玩意不严谨(说好的外国程序员严谨的呢?又让我怀疑作者故意挖坑了),因为v有可能还能为undefined,所以改为

return !!v;

后再运行,发现不知神马鬼的bootstrap-switch-undefined消失了,开关按钮的大小也与设置相符(顺带解决的这个大小问题,早些时候还没发现)。

……那个不能初始化为选中状态的问题总是那么坚强,仍然存在!只能在firefox中再次debug,state()这个函数未曾调用,但未选中状态怎么出现的呢(先前猜测是正常设置了选中再设置为未选中)?猜测坐标动画那块有问题,顽固的我在bootstrap-switch.js中找到 prvcontainerPosition 这个函数,设置开、关区块的坐标位置的,其中有这么一句

var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.ope;

ope是个什么鬼?搜索整个文件都没有ope的定义,在arguments无参数时,那state变量将会始终为undefined,这不是坑人吗?太坑了!

既然变量名定义为state,那么我尝试着使用

this.options.state代替this.ope

再次运行,一切正常了!好开森!!!焕然醒悟,ope是不是作者故意将options.state简写为一个不存在的属性?坑人!

不管怎么坑,最后我还得感谢作者将此组件开源出来,谢谢!

评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值