具有动态/数组ID的Javascript函数

我有一个关于JavaScript函数的动态调用的问题。我的问题是：

假设我有一个元素（div），它包含一个颜色选择器。我希望动态使用/克隆此元素（用户希望的次数）。调用此颜色选择器的过程如下所示： 代码可以在这里查看：（将其放在小提琴中，因为它在这里被弄乱了，而不是在那里进行测试）

其中，id是一个名为

my\u color

的变量。我在输入中添加了

[]

，这样我可以调用更多的颜色选择器项。这是好的，我可以有5个这样的元素，可以读取每个输入。这个问题与colorpicker调用有关。colopicker现在有

id=“color\u picker”

，然后调用：

jQuery(document).ready(function(){
    jQuery('#color_picker').children('div').css('backgroundColor', '<?php echo $value; ?>');    
    jQuery('#color_picker').ColorPicker({
        color: '<?php echo $value; ?>',
        onShow: function (colpkr) {
            jQuery(colpkr).fadeIn(500);
            return false;
        },
        onHide: function (colpkr) {
            jQuery(colpkr).fadeOut(500);
            return false;
        },
        onChange: function (hsb, hex, rgb) {    
            jQuery('#color_picker').children('div').css('backgroundColor', '#'+ hex);
            jQuery('#color_picker').next('input').attr('value','#'+ hex);
        }
    });
});

jQuery（文档）.ready（函数（）{
jQuery（“#color_picker”）.children（'div'）.css（'backgroundColor'，”）；
jQuery（“#颜色选择器”）.ColorPicker({
颜色：''，
onShow：函数（colpkr）{
jQuery（colpkr）.fadeIn（500）；
返回false；
},
onHide:function（colpkr）{
jQuery（colpkr）.fadeOut（500）；
返回false；
},
onChange：函数（hsb，hex，rgb）{
jQuery（'#color_picker'）.children（'div'）.css（'backgroundColor'，'#'+hex）；
jQuery（'#color_picker'）.next（'input'）.attr（'value'，'#'+hex）；
}
});
});

问题是：如果我现在有3个这样的项目，它们的JavaScript总是一样的。colorpicker旁边的输入是“arrayed”->

[]

，但是如何为每个项目设置colorpicker JavaScript。并且无法提供

颜色选择器id->color\u picker[]

。现在，如果我想更改第二项的颜色（例如），第一项的颜色将更改，而不是第二项。我猜每个都需要自己的JavaScript，但是如何调用它呢

---

提前感谢

使用颜色选择器类（在小提琴中它已经有了

colorSelector

，所以我将使用它）而不是id，并在onChange处理程序中引用

jQuery（this）

，以处理正确的子项和输入。我想这应该是你想要的

jQuery(document).ready(function(){
    //init all color pickers to the same $value
    jQuery('.colorSelector').children('div').css('backgroundColor', '<?php echo $value; ?>');    
    //init ColorPicker handling for all color pickers
    jQuery('.colorSelector').ColorPicker({
        color: '<?php echo $value; ?>',
        onShow: function (colpkr) {
            jQuery(colpkr).fadeIn(500);
            return false;
        },
        onHide: function (colpkr) {
            jQuery(colpkr).fadeOut(500);
            return false;
        },
        //handle onChange individually
        onChange: function (hsb, hex, rgb) {    
            jQuery(this).children('div').css('backgroundColor', '#'+ hex);
            jQuery(this).next('input').attr('value','#'+ hex);
        }
    });
});

jQuery（文档）.ready（函数（）{
//将所有颜色选择器初始化为相同的$value
jQuery（'.colorSelector'）.children（'div'）.css（'backgroundColor'，''）；
//所有颜色选择器的初始化颜色选择器处理
jQuery（'.colorSelector'）.ColorPicker({
颜色：''，
onShow：函数（colpkr）{
jQuery（colpkr）.fadeIn（500）；
返回false；
},
onHide:function（colpkr）{
jQuery（colpkr）.fadeOut（500）；
返回false；
},
//单独处理一次更改
onChange：函数（hsb，hex，rgb）{
jQuery（this）.children（'div'）.css（'backgroundColor'，'#'+hex）；
jQuery（this）.next（'input'）.attr（'value'，'#'+hex）；
}
});
});

class而不是id，并使用

jQuery（'.color\u picker'）调用

？您好，如果使用此选项并具有（例如3项）。更改其中一个项目的颜色时，会对所有项目进行相同的更改（为项目2设置颜色也会为项目1和项目3设置相同的颜色）。你知道如何对我正在更改的代码进行更改吗？请使用

jQuery（this）

而不是

jQuery（.）

在

onChange

函数中引用它。你能指出上面发布的代码的代码示例吗？非常感谢！嗨，tnx对于这个，我已经尝试了很多方法，但仍然不适合我。还有其他建议吗？