bootstrap-switch 使用中遇到的问题

原创
所属分类: Web前端 2018-09-27 523
来源:baidu.com

bootstrap-switch 下载地址:https://github.com/Bttstrp/bootstrap-switch


在使用bootstrap-switch插件过程中,遇到给input框设置属性没有对插件起到作用。比如设置data-size,checked等,但是组件在初始化并不会识别这些参数。导致组件初始化失败,经过查阅网上一些资料,发现了如下解决方法,仅供参考,如果有不对的地方还望指点。

<input type="checkbox" class="status" id="status_1" data-id="1" data-status="0" />
<input type="checkbox" class="status" id="status_2" data-id="2" data-status="1" />
 
<script type="text/javascript">
$(function(){
    	// 用于开关组件初始化
        $('.status').each(function(){
            var id = $(this).data('id');
            var status = $(this).data('status');
 
            $(this).bootstrapSwitch({
                onColor : "success",
                offColor : "warning",
            }).bootstrapSwitch('size', "mini").bootstrapSwitch('state', status);
        });
 
        // 监听开关状态发生变化时,触发事件
        // 如果与初始化放在一起编辑,会导致此事件重复调用
        $('.status').bootstrapSwitch("onSwitchChange",function(event,state){
            var id = $(this).data('id');
            var status = parseInt($(this).attr('data-status'));
 
            if (status != state) {
                var check = false;
                // 修改状态
                $.ajax({
                    url: "test.php",
                    async: false,
                    type: "post",
                    dataType: "json",
                    data: {'id': id, 'status': status},
                    success: function(data){
                        if (data.code == 1) {
                            check = true;
                            $('#status_'+id).attr('data-status', status ? 0 : 1);
                            layer.msg('更新成功');    //这里是调用了layer弹窗组件
                        } else {
                            layer.msg(data.msg);
                        }
                    }
                });
 
                return check;
            }
        })
    });
</script>

处理方式是:我先对其开关组件进行初始化,然后再设定监听事件,这里不能将监听事件和初始化在一起处理,否则会导致onSwitchChange事件被重复调用。

原创声明:本文为博主原创文章,转载请附上原文出处链接和声明。

相关推荐

更多内容>

原生js实现复制文本到粘贴板

Web前端

前端css/js实现文字上下滚动

Web前端

前端如何展示商品属性:SKU多维属性状态判断算法的应用

Web前端

如何在CSS中添加手机端(移动端)自适应样式

Web前端
点这里分享到
朋友圈