如下效果图，点击一次添加按钮，动态生成一组comboBox和slider。由于easyUI的下拉框和滑块使用相同的控件id，通过JS生成控件，如果两个id一样就会造成冲突，例如点击第一组的下拉框，第二组的下拉框也会跟着动。
如何避免这个冲突？
思路：可以在板块div外层加一个id，区分每组策略的comboBox和slider。
步骤：
1、点击，用字符串拼接，插入HTML代码，这里的HTML代码有一个唯一Id
2、根据板块div的Id查找空间id,调用生成comboBox和slider
具体实现代码如下：
data1 ="id":0"text":"0:00""selected":"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"
<span style="color: #0000ff;">function<span style="color: #000000;"> timefun(idClass){
$(idClass).comboBox({
limitToList:<span style="color: #0000ff;">true<span style="color: #000000;">,data:data1,valueField:'id'<span style="color: #000000;">,textField:'text'<span style="color: #000000;">,editable:<span style="color: #0000ff;">false<span style="color: #000000;">,panelHeight:"auto"<span style="color: #000000;">
<span style="color: #0000ff;">function<span style="color: #000000;"> sliderfun(s1,s2,s3){
<span style="color: #0000ff;">var defaultValue = 80;<span style="color: #008000;">//<span style="color: #008000;">默认滑动位置
<span style="color: #0000ff;">var sliderLength = 130;<span style="color: #008000;">//<span style="color: #008000;">滑块长度
<span style="color: #000000;"> $(s1).slider({
mode: 'h'<span style="color: #000000;">,value : defaultValue,onChange:<span style="color: #0000ff;">function<span style="color: #000000;">(newValue,oldValue){
$(s2).width(newValuesliderLength/100);
<span style="color: #000000;"> $(s3).val(newValue);
}
});
</span><span style="color: #008000;">/*</span><span style="color: #008000;">第一个策略，<a href="https://www.jb51.cc/tag/shengcheng/" target="_blank" class="keywords">生成</a>时间下拉框、亮度音量滑块</span><span style="color: #008000;">*/</span><span style="color: #000000;">
sliderAndTime(</span>"#rule1"<span style="color: #000000;">);
</span><span style="color: #0000ff;">var</span> numadd = 1<span style="color: #000000;">;
</span><span style="color: #008000;">/*</span><span style="color: #008000;">点击<a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a>，<a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a>策略设置</span><span style="color: #008000;">*/</span><span style="color: #000000;">
$(</span>".add-rule").on("click",<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
<span style="color: #ff0000;">numadd</span></span><span style="color: #ff0000;">++;
</span><span style="color: #0000ff;">var</span> rule<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Id = "rule"+<span style="color: #000000;">numadd;
</span><span style="color: #0000ff;">var</span> rule<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Id2 = "#"+<span style="color: #000000;">rule<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Id;
</span><span style="color: #0000ff;">var</span> rule<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a> = '<div id="'+<span style="color: #ff0000;"><strong>rule<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Id</strong></span>+'" class="rule-<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>">'+
'<div class="rule-delete"></div>'+
'<div class="op_time_<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>"><div >每天开启时段:</div><div class="time_<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>"><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_<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>">'+
'<div class="text_fl" >亮度设置:</div><div class="<a href="https://www.jb51.cc/tag/logo/" target="_blank" class="keywords">logo</a>-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="<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>1"><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_<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a> clearfix"><div class="<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>1"><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="au<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a>music_add"></div><div class="audiomusic" ></div></div></div>'+
'<div class="num_<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a> clearfix"><div class="<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>1"><input id="audioyinliang" class="fl" type="text" value="" /><div class="num-yin fl">%</div></div></div>'+
'</div>'+
'</div>'<span style="color: #000000;">;
$(</span>".add-rule"<span style="color: #000000;">).before(rule<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>);
$(</span>".rule-delete"<span style="color: #000000;">).show();
$(</span>".rule-delete:first").hide();<span style="color: #008000;">//</span><span style="color: #008000;">第一个策略没有<a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a>叉号</span>
<span style="color: #008000;">/*</span><span style="color: #008000;">点击叉号，对应的策略设置消失</span><span style="color: #008000;">*/</span><span style="color: #000000;">
$(</span>".rule-delete").on("click",<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
$(</span><span style="color: #0000ff;">this</span><span style="color: #000000;">).parent().remove();
});
</span><span style="color: #008000;">/*</span><span style="color: #008000;"><a href="https://www.jb51.cc/tag/shengcheng/" target="_blank" class="keywords">生成</a>时间下拉框、亮度音量滑块</span><span style="color: #008000;">*/</span><span style="color: #000000;">
sliderAndTime(<span style="color: #ff0000;">rule<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Id2</span>);
});
</span><span style="color: #008000;">/*</span><span style="color: #008000;">点击叉号，对应的策略设置消失</span><span style="color: #008000;">*/</span><span style="color: #000000;">
$(</span>".rule-delete").on("click",<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
$(</span><span style="color: #0000ff;">this</span><span style="color: #000000;">).parent().remove();
});
});
<span style="color: #008000;">/<span style="color: #008000;"> 时间下拉框函数 <span style="color: #008000;">/<span style="color: #0000ff;">function<span style="color: #000000;"> timefun(idClass){
$(idClass).comboBox({
limitToList:<span style="color: #0000ff;">true<span style="color: #000000;">,data:data1,valueField:'id'<span style="color: #000000;">,textField:'text'<span style="color: #000000;">,editable:<span style="color: #0000ff;">false<span style="color: #000000;">,panelHeight:"auto"<span style="color: #000000;">
});}
<span style="color: #008000;">/*<span style="color: #008000;"> <span style="color: #008000;">/<span style="color: #0000ff;">function<span style="color: #000000;"> sliderfun(s1,s2,s3){
<span style="color: #0000ff;">var defaultValue = 80;<span style="color: #008000;">//<span style="color: #008000;">默认滑动位置
<span style="color: #0000ff;">var sliderLength = 130;<span style="color: #008000;">//<span style="color: #008000;">滑块长度
<span style="color: #000000;"> $(s1).slider({
mode: 'h'<span style="color: #000000;">,value : defaultValue,onChange:<span style="color: #0000ff;">function<span style="color: #000000;">(newValue,oldValue){
$(s2).width(newValuesliderLength/100);
<span style="color: #000000;"> $(s3).val(newValue);
}
});
$(s2).width(defaultValue*sliderLength/100);
<span style="color: #000000;"> $(s3).empty().val(defaultValue);
$(s3).on('keyup',<span style="color: #0000ff;">function<span style="color: #000000;">(){
<span style="color: #0000ff;">var val = $(<span style="color: #0000ff;">this<span style="color: #000000;">).val();
<span style="color: #0000ff;">if(val==''||val==<span style="color: #0000ff;">null||val==undefined||<span style="color: #000000;">isNaN(val)){
val=0<span style="color: #000000;">;
}
<span style="color: #0000ff;">var num =<span style="color: #000000;"> parseInt(val);
<span style="color: #0000ff;">if(num>100<span style="color: #000000;">){
num=100<span style="color: #000000;">;
}
$(<span style="color: #0000ff;">this<span style="color: #000000;">).empty().val(num);
</span><span style="color: #0000ff;">var</span> width = num*sliderLength/100;
$(s1).slider('setValue'<span style="color: #000000;">,num);
$(s2).css(</span>'width'<span style="color: #000000;">,width);});
}
<span style="color: #008000;">/<span style="color: #008000;">生成时间下拉框、亮度音量滑块<span style="color: #008000;">/
<span style="color: #0000ff;">function<span style="color: #000000;"> sliderAndTime(id){
<span style="color: #0000ff;">var j1 = id +" .time-select1"<span style="color: #000000;">;
<span style="color: #0000ff;">var j2 = id +" .time-select2"<span style="color: #000000;">;
</span><span style="color: #0000ff;">var</span> a1 = id +" .ssa"<span style="color: #000000;">;
</span><span style="color: #0000ff;">var</span> a2 = id +" #ssa_add"<span style="color: #000000;">;
</span><span style="color: #0000ff;">var</span> a3 = id +" #liangdu"<span style="color: #000000;">;
</span><span style="color: #0000ff;">var</span> b1 = id +" .music"<span style="color: #000000;">;
</span><span style="color: #0000ff;">var</span> b2 = id +" #music_add"<span style="color: #000000;">;
</span><span style="color: #0000ff;">var</span> b3 = id +" #yinliang"<span style="color: #000000;">;
</span><span style="color: #0000ff;">var</span> c1 = id +" .au<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a>music"<span style="color: #000000;">;
</span><span style="color: #0000ff;">var</span> c2 = id +" #au<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a>music_add"<span style="color: #000000;">;
</span><span style="color: #0000ff;">var</span> c3 = id +" #au<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a>yinliang"<span style="color: #000000;">;
</span><span style="color: #008000;">/*</span><span style="color: #008000;"> 时间下拉框</span><span style="color: #008000;">*/</span><span style="color: #000000;">
timefun(j1);
timefun(j2);
</span><span style="color: #008000;">/*</span><span style="color: #008000;">亮度滑块</span><span style="color: #008000;">*/</span><span style="color: #000000;">
sliderfun(a1,a2,a3);
</span><span style="color: #008000;">/*</span><span style="color: #008000;">视频音量滑块</span><span style="color: #008000;">*/</span><span style="color: #000000;">
sliderfun(b1,b2,b3);
</span><span style="color: #008000;">/*</span><span style="color: #008000;">音频音量滑块</span><span style="color: #008000;">*/</span><span style="color: #000000;">
sliderfun(c1,c2,c3);}
到这里，就通过板块ID 区分解决了不同板块的easyUI控件id冲突问题~
原文链接：https://www.f2er.com/jquery/403442.html
