Question

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

假设我有一个包含颜色选择器的元素（div）。我想动态地使用/克隆这个元素（用户想要多少次）。调用此colorpicker看起来像：代码可以在这里查看：http://jsfiddle.net/CJhqc/1/（把它放在小提琴里，因为它在这里搞砸了，而不是在那里进行测试）

其中id是例如名为my_color的变量。我在输入中添加了[]，以便我可以调用更多这种颜色选择器项。这没关系，我可以有5个这样的元素，可以读取每个输入。问题来自colorpicker调用。 colopicker现在有id="color_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);
        }
    });
});

问题：如果我现在有3个这样的项目，那么它们的JavaScript总是一样的。颜色选择器旁边的输入是“排列” - ＆gt; <?php echo $id; ?>[]，但如何为每个项目设置颜色选择器JavaScript。并且不能给color_picker id -> color_picker[]。现在，如果我想改变第二个项目的颜色（例如），颜色将改变第一个而不是第二个。猜猜每个人都需要它自己的JavaScript，但是如何调用呢？

提前致谢!!!

Answer 1

使用颜色选择器的类（在它已有的小提琴中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);
        }
    });
});

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

1 个答案: