0

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

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

其中 id 是例如名为 的变量my_color。我添加[]到输入中，以便我可以调用更多这个颜色选择器项目。没关系，我可以有 5 个这样的元素，并且可以读取每个输入。问题来自颜色选择器调用。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 总是相同的。颜色选择器旁边的输入是 "arrayed" -> <?php echo $id; ?>[]，但是如何为每个项目设置颜色选择器 JavaScript。而且不能给color_picker id -> color_picker[]。现在，如果我想更改第二个项目的颜色（例如），第一个项目的颜色将发生变化，而不是第二个项目。猜猜每个人都需要它自己的 JavaScript，但是如何调用它呢？

提前致谢！！！

4

1 回答 1

0

使用颜色选择器的类（在它已经有的小提琴中，colorSelector所以我将使用它）而不是 id，并jQuery(this)在 onChange 处理程序中引用以使用正确的子项和输入。我认为这应该像你想要的那样工作。

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);
        }
    });
});
于 2013-01-07T14:49:59.950 回答