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

Javascript function with dynamic/array ID

本文关键字：Javascript 函数 ID 数组 动态      更新时间：2023-09-26

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

假设我有一个元素(div)，它包含一个颜色选择器。我想动态地使用/克隆这个元素(用户想要多少次)。这个取色器的调用如下:代码可以在这里查看: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总是相同的。颜色选择器旁边的输入是"数组"-> <?php echo $id; ?>[]，但是我如何为每个项目设置颜色选择器JavaScript。不能给color_picker id -> color_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);
        }
    });
});
相关文章：