点击按钮，生成一组一组combobox和slider时，避免控件Id相同，导致控件冲突的方法

如下效果图，点击一次添加按钮，动态生成一组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><span style="color: #008000;"&gt;/*</span><span style="color: #008000;"&gt;第一个策略，<a href="/tag/shengcheng/" target="_blank" class="keywords">生成</a>时间下拉框、亮度音量滑块</span><span style="color: #008000;"&gt;*/</span><span style="color: #000000;"&gt;
sliderAndTime(</span>"#rule1"<span style="color: #000000;"&gt;);

</span><span style="color: #0000ff;"&gt;var</span> numadd = 1<span style="color: #000000;"&gt;;
</span><span style="color: #008000;"&gt;/*</span><span style="color: #008000;"&gt;点击<a href="/tag/tianjia/" target="_blank" class="keywords">添加</a>，<a href="/tag/tianjia/" target="_blank" class="keywords">添加</a>策略设置</span><span style="color: #008000;"&gt;*/</span><span style="color: #000000;"&gt;
$(</span>".add-rule").on("click",<span style="color: #0000ff;"&gt;function</span><span style="color: #000000;"&gt;(){
    <span style="color: #ff0000;"&gt;numadd</span></span><span style="color: #ff0000;"&gt;++;
    </span><span style="color: #0000ff;"&gt;var</span> rule<a href="/tag/Box/" target="_blank" class="keywords">Box</a>Id = "rule"+<span style="color: #000000;"&gt;numadd;
    </span><span style="color: #0000ff;"&gt;var</span> rule<a href="/tag/Box/" target="_blank" class="keywords">Box</a>Id2 = "#"+<span style="color: #000000;"&gt;rule<a href="/tag/Box/" target="_blank" class="keywords">Box</a>Id;

    </span><span style="color: #0000ff;"&gt;var</span> rule<a href="/tag/Box/" target="_blank" class="keywords">Box</a> = '<div id="'+<span style="color: #ff0000;"&gt;<strong>rule<a href="/tag/Box/" target="_blank" class="keywords">Box</a>Id</strong></span>+'" class="rule-<a href="/tag/Box/" target="_blank" class="keywords">Box</a>"&gt;'+
        '<div class="rule-delete"&gt;</div>'+
        '<div class="op_time_<a href="/tag/Box/" target="_blank" class="keywords">Box</a>"&gt;<div >每天开启时段:</div><div class="time_<a href="/tag/Box/" target="_blank" class="keywords">Box</a>"&gt;<div class="time_bt time-select1"&gt;</div></div><div>至</div><div class="time_box" ><div class="time_bt time-select2"&gt;</div></div></div>'+
        '<div class="set_brightness_<a href="/tag/Box/" target="_blank" class="keywords">Box</a>"&gt;'+
            '<div class="text_fl" >亮度设置:</div><div class="<a href="/tag/logo/" target="_blank" class="keywords">logo</a>-1 fl"&gt;</div>'+
            '<div class="text_fl width_130" ><div class="swip_box" ><div id="ssa_add"&gt;</div><div class="ssa"&gt;</div></div></div>'+
            '<div class="num_box clearfix" ><div class="<a href="/tag/Box/" target="_blank" class="keywords">Box</a>1"&gt;<input id="liangdu" class="fl" type="text" value="" /><div class="num-deng fl"&gt;%</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"&gt;</div><div class="music" ></div></div></div>'+
            '<div class="num_<a href="/tag/Box/" target="_blank" class="keywords">Box</a> clearfix"&gt;<div class="<a href="/tag/Box/" target="_blank" class="keywords">Box</a>1"&gt;<input id="yinliang" class="fl" type="text" value="" /><div class="num-yin fl"&gt;%</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="/tag/dio/" target="_blank" class="keywords">dio</a>music_add"&gt;</div><div class="audiomusic" ></div></div></div>'+
            '<div class="num_<a href="/tag/Box/" target="_blank" class="keywords">Box</a> clearfix"&gt;<div class="<a href="/tag/Box/" target="_blank" class="keywords">Box</a>1"&gt;<input id="audioyinliang" class="fl" type="text" value="" /><div class="num-yin fl"&gt;%</div></div></div>'+
        '</div>'+
    '</div>'<span style="color: #000000;"&gt;;

    $(</span>".add-rule"<span style="color: #000000;"&gt;).before(rule<a href="/tag/Box/" target="_blank" class="keywords">Box</a>);
    $(</span>".rule-delete"<span style="color: #000000;"&gt;).show();
    $(</span>".rule-delete:first").hide();<span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;第一个策略没有<a href="/tag/shanchu/" target="_blank" class="keywords">删除</a>叉号</span>

    <span style="color: #008000;"&gt;/*</span><span style="color: #008000;"&gt;点击叉号，对应的策略设置消失</span><span style="color: #008000;"&gt;*/</span><span style="color: #000000;"&gt;
    $(</span>".rule-delete").on("click",<span style="color: #0000ff;"&gt;function</span><span style="color: #000000;"&gt;(){
        $(</span><span style="color: #0000ff;"&gt;this</span><span style="color: #000000;"&gt;).parent().remove();
    });

    </span><span style="color: #008000;"&gt;/*</span><span style="color: #008000;"&gt;<a href="/tag/shengcheng/" target="_blank" class="keywords">生成</a>时间下拉框、亮度音量滑块</span><span style="color: #008000;"&gt;*/</span><span style="color: #000000;"&gt;
    sliderAndTime(<span style="color: #ff0000;"&gt;rule<a href="/tag/Box/" target="_blank" class="keywords">Box</a>Id2</span>);

});

</span><span style="color: #008000;"&gt;/*</span><span style="color: #008000;"&gt;点击叉号，对应的策略设置消失</span><span style="color: #008000;"&gt;*/</span><span style="color: #000000;"&gt;
$(</span>".rule-delete").on("click",<span style="color: #0000ff;"&gt;function</span><span style="color: #000000;"&gt;(){
    $(</span><span style="color: #0000ff;"&gt;this</span><span style="color: #000000;"&gt;).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 = 80;//默认滑动位置
var sliderLength = 130;//滑块长度
 $(s1).slider({
mode: 'h',value : defaultValue,onChange:function(newValue,oldValue){
$(s2).width(newValuesliderLength/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);
```
 width = num*sliderLength/100;
 $(s1).slider('setValue''width'<span style="color: #000000;"&gt;,width);
```
});
}

/生成时间下拉框、亮度音量滑块/
function sliderAndTime(id){
var j1 = id +" .time-select1";
var j2 = id +" .time-select2";

</span><span style="color: #0000ff;"&gt;var</span> a1 = id +" .ssa"<span style="color: #000000;"&gt;;
</span><span style="color: #0000ff;"&gt;var</span> a2 = id +" #ssa_add"<span style="color: #000000;"&gt;;
</span><span style="color: #0000ff;"&gt;var</span> a3 = id +" #liangdu"<span style="color: #000000;"&gt;;

</span><span style="color: #0000ff;"&gt;var</span> b1 = id +" .music"<span style="color: #000000;"&gt;;
</span><span style="color: #0000ff;"&gt;var</span> b2 = id +" #music_add"<span style="color: #000000;"&gt;;
</span><span style="color: #0000ff;"&gt;var</span> b3 = id +" #yinliang"<span style="color: #000000;"&gt;;

</span><span style="color: #0000ff;"&gt;var</span> c1 = id +" .au<a href="/tag/dio/" target="_blank" class="keywords">dio</a>music"<span style="color: #000000;"&gt;;
</span><span style="color: #0000ff;"&gt;var</span> c2 = id +" #au<a href="/tag/dio/" target="_blank" class="keywords">dio</a>music_add"<span style="color: #000000;"&gt;;
</span><span style="color: #0000ff;"&gt;var</span> c3 = id +" #au<a href="/tag/dio/" target="_blank" class="keywords">dio</a>yinliang"<span style="color: #000000;"&gt;;

</span><span style="color: #008000;"&gt;/*</span><span style="color: #008000;"&gt; 时间下拉框</span><span style="color: #008000;"&gt;*/</span><span style="color: #000000;"&gt;
timefun(j1);
timefun(j2);

</span><span style="color: #008000;"&gt;/*</span><span style="color: #008000;"&gt;亮度滑块</span><span style="color: #008000;"&gt;*/</span><span style="color: #000000;"&gt;
sliderfun(a1,a2,a3);

</span><span style="color: #008000;"&gt;/*</span><span style="color: #008000;"&gt;视频音量滑块</span><span style="color: #008000;"&gt;*/</span><span style="color: #000000;"&gt;
sliderfun(b1,b2,b3);

</span><span style="color: #008000;"&gt;/*</span><span style="color: #008000;"&gt;音频音量滑块</span><span style="color: #008000;"&gt;*/</span><span style="color: #000000;"&gt;
sliderfun(c1,c2,c3);

}

到这里，就通过板块ID 区分解决了不同板块的easyUI控件id冲突问题~

点击按钮，生成一组一组combobox和slider时，避免控件Id相同，导致控件冲突的方法

猜你在找的jQuery相关文章