点击按钮，生成一组一组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 = 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冲突问题~