首页 > 代码库 > 点击按钮,生成一组一组combobox和slider时,避免控件Id相同,导致控件冲突的方法
点击按钮,生成一组一组combobox和slider时,避免控件Id相同,导致控件冲突的方法
如下效果图,点击一次添加按钮,动态生成一组combobox和slider。由于easyUI的下拉框和滑块使用相同的控件id,通过JS生成控件,如果两个id一样就会造成冲突,例如点击第一组的下拉框,第二组的下拉框也会跟着动。
如何避免这个冲突?
思路:可以在板块div外层加一个id,区分每组策略的combobox和slider。
步骤:
1、点击,用字符串拼接,插入html代码,这里的html代码有一个唯一Id
2、根据板块div的Id查找空间id,调用生成combobox和slider
具体实现代码如下:
/*时间下拉框data数据*/ var data1 = [ { "id":0, "text":"0:00", "selected":true },{ "id":1, "text":"01:00" },{ "id":2, "text":"02:00" },{ "id":3, "text":"03:00" },{ "id":4, "text":"04:00" },{ "id":5, "text":"05:00" } ]; /* ------ $(document).ready ----------- */ $(function () { /*第一个策略,生成时间下拉框、亮度音量滑块*/ sliderAndTime("#rule1"); var numadd = 1; /*点击添加,添加策略设置*/ $(".add-rule").on("click",function(){ numadd++; var ruleBoxId = "rule"+numadd; var ruleBoxId2 = "#"+ruleBoxId; var ruleBox = ‘<div id="‘+ruleBoxId+‘" class="rule-box">‘+ ‘<div class="rule-delete"></div>‘+ ‘<div class="op_time_box"><div >每天开启时段:</div><div class="time_box"><div class="time_bt time-select1"></div></div><div>至</div><div class="time_box" ><div class="time_bt time-select2"></div></div></div>‘+ ‘<div class="set_brightness_box">‘+ ‘<div class="text_fl" >亮度设置:</div><div class="logo-1 fl"></div>‘+ ‘<div class="text_fl width_130" ><div class="swip_box" ><div id="ssa_add"></div><div class="ssa"></div></div></div>‘+ ‘<div class="num_box clearfix" ><div class="box1"><input id="liangdu" class="fl" type="text" value="" /><div class="num-deng fl">%</div></div></div>‘+ ‘<div class="text_fl" >视频音量设置:</div><div class="logo-2 fl" ></div>‘+ ‘<div class="text_fl width_130" ><div class="swip_box" ><div id="music_add"></div><div class="music" ></div></div></div>‘+ ‘<div class="num_box clearfix"><div class="box1"><input id="yinliang" class="fl" type="text" value="" /><div class="num-yin fl">%</div></div></div>‘+ ‘<div class="text_fl" >音频广告音量:</div><div class="logo-3 fl" ></div>‘+ ‘<div class="text_ fl width_130" ><div class="swip_box" ><div id="audiomusic_add"></div><div class="audiomusic" ></div></div></div>‘+ ‘<div class="num_box clearfix"><div class="box1"><input id="audioyinliang" class="fl" type="text" value="" /><div class="num-yin fl">%</div></div></div>‘+ ‘</div>‘+ ‘</div>‘; $(".add-rule").before(ruleBox); $(".rule-delete").show(); $(".rule-delete:first").hide();//第一个策略没有删除叉号 /*点击叉号,对应的策略设置消失*/ $(".rule-delete").on("click",function(){ $(this).parent().remove(); }); /*生成时间下拉框、亮度音量滑块*/ sliderAndTime(ruleBoxId2); }); /*点击叉号,对应的策略设置消失*/ $(".rule-delete").on("click",function(){ $(this).parent().remove(); }); }); /* 时间下拉框函数 */ function timefun(idClass){ $(idClass).combobox({ limitToList:true, data:data1, valueField:‘id‘, textField:‘text‘, editable:false, panelHeight:"auto" }); } /* * 亮度、视频音量、语音音量滑块函数 *s1 小滑块 class *s2 上面进度滑块 id *s3 显示滑动数值input框 id * */ function sliderfun(s1,s2,s3){ var defaultValue = http://www.mamicode.com/80;//默认滑动位置 var sliderLength = 130;//滑块长度 $(s1).slider({ mode: ‘h‘, value : defaultValue, onChange:function(newValue,oldValue){ $(s2).width(newValue*sliderLength/100); $(s3).val(newValue); } }); $(s2).width(defaultValue*sliderLength/100); $(s3).empty().val(defaultValue); $(s3).on(‘keyup‘,function(){ var val = $(this).val(); if(val==‘‘||val==null||val==undefined||isNaN(val)){ val=0; } var num = parseInt(val); if(num>100){ num=100; } $(this).empty().val(num); var width = num*sliderLength/100; $(s1).slider(‘setValue‘, num); $(s2).css(‘width‘, width); }); } /*生成时间下拉框、亮度音量滑块*/ function sliderAndTime(id){ var j1 = id +" .time-select1"; var j2 = id +" .time-select2"; var a1 = id +" .ssa"; var a2 = id +" #ssa_add"; var a3 = id +" #liangdu"; var b1 = id +" .music"; var b2 = id +" #music_add"; var b3 = id +" #yinliang"; var c1 = id +" .audiomusic"; var c2 = id +" #audiomusic_add"; var c3 = id +" #audioyinliang"; /* 时间下拉框*/ timefun(j1); timefun(j2); /*亮度滑块*/ sliderfun(a1,a2,a3); /*视频音量滑块*/ sliderfun(b1,b2,b3); /*音频音量滑块*/ sliderfun(c1,c2,c3); }
到这里,就通过板块ID 区分解决了不同板块的easyUI控件id冲突问题~
点击按钮,生成一组一组combobox和slider时,避免控件Id相同,导致控件冲突的方法
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。