bootstrap-switch：记一次很坑的问题（连续相同状态的多行数据只有第一个显示按钮，其他行没有开关初始化）

Posted 2022-04-21 gcgc

先上截图，第234行都是禁用状态，但是只有第2行显示了禁用开关，后面的都没有开关初始化

检查下代码：

onLoadSuccess: function(data)
    #获取行数据的状态#
   console.log(‘渲染数据完成后，打印所有数据‘)
   console.log(data);

   var data=$("#mytab").bootstrapTable("getData");
   console.log(‘已获取全部数据%s‘,data);

   for (var i=0;i<data.length;i++)
       console.log(data[i].project_code,data[i].status)
       if (data[i].status == 1)
           console.log(‘这个是开启的‘)
           $(‘#project_status_switch_on‘).bootstrapSwitch(
               onText: "启用",      // 设置ON文本  
               offText: "禁用",    // 设置OFF文本  
               onColor: "success",// 设置ON文本颜色(info/success/warning/danger/primary)  
               offColor: "danger",  // 设置OFF文本颜色 (info/success/warning/danger/primary)  
               size: "small",    // 设置控件大小,从小到大  (mini/small/normal/large)
           ).bootstrapSwitch(‘state‘,true)
       else
           console.log(‘这个是禁用的‘)
           $(‘#project_status_switch_off‘).bootstrapSwitch(
               onText: "启用",      // 设置ON文本  
               offText: "禁用",    // 设置OFF文本  
               onColor: "success",// 设置ON文本颜色(info/success/warning/danger/primary)  
               offColor: "danger",  // 设置OFF文本颜色 (info/success/warning/danger/primary)  
               size: "small",    // 设置控件大小,从小到大  (mini/small/normal/large)
           ).bootstrapSwitch(‘state‘,false)
       
   

发现代码：$(‘#project_status_switch_off‘).bootstrapSwitch()，是按照id=project_status_switch_off来渲染的，只要是有这个属性的input框应该都能渲染才对啊。F12检查下没问题确实是这个属性值，那为什么不能渲染呢？

将渲染开关定位元素方式修改为：$("[id=‘project_status_switch_off‘]").bootstrapSwitch(）

 

 完美解决。

后续分析：可能$(‘#project_status_switch_off‘)方式只能找到第一个匹配的元素，而$("[id=‘project_status_switch_off‘]")方式会将所有符合条件的元素全部匹配。