jPicker 设置颜色

Question

我正在使用 jPicker 插件从选择器中获取颜色。 我以这种方式创建元素：

           $(function(){
                $('#txtBackgroundColor').jPicker(
                {
                    color:
                    {
                        mode: 'h', // acceptable values "h" (hue), "s" (saturation), "v" (brightness), "r" (red), "g" (green), "b" (blue), "a" (alpha)
                        active: new $.jPicker.Color({ hex: 'eaeaea' }), // accepts any declared jPicker.Color object or hex string WITH OR WITHOUT '#'
                    },
                    window:
                    {
                        position:
                        {
                            x: 'screenCenter', // acceptable values "left", "center", "right", "screenCenter", or relative px value
                            y: '200px', // acceptable values "top", "bottom", "center", or relative px value
                        },
                        expandable: true
                    },
                },

            });

当我单击一个按钮时，我想设置该 jpicker 的活动颜色。我在文档中看到了这一行：

$('#update').click(function(){
    $.jPicker.List[0].color.active.val('hex', 'e2ddcf', this); 
});

但问题是我有多个jPicker，例如我不知道List的索引，有没有办法通过id而不是索引List来设置jPicker颜色？

谢谢

Answer 1

设置值

var control= $('#txtBackgroundColor')
var colorPicked = '#e2ddcf';
control.jPicker({
   color: { active: colorPicked}
});
control[0].color.active.val('hex', colorPicked);
control.val(colorPicked.replace("#", ""));

根据您的情况，上面的某些行可能无关紧要。

查找 ID 如果：

$('#txtBackgroundColor')

这样查找带有 jPicker 类的 span 是不正确的

<span class="jPicker">

在此之上，应该有一个显示样式为 none 且 ID 值的输入。在上面的例子中使用那个。

Answer 2

你的语法不对。修好了。

您可以像这样使用 .each() 来定位每个元素：

$(function() {
$('#txtBackgroundColor').each(function() {
    $(this).jPicker({
        color: {
            mode: 'h', // acceptable values "h" (hue), "s" (saturation), "v" (brightness), "r" (red), "g" (green), "b" (blue), "a" (alpha)
            active: new $.jPicker.Color({
                hex: 'eaeaea'
            }), // accepts any declared jPicker.Color object or hex string WITH OR WITHOUT '#'
        },
        window: {
            position: {
                x: 'screenCenter', // acceptable values "left", "center", "right", "screenCenter", or relative px value
                y: '200px', // acceptable values "top", "bottom", "center", or relative px value
            },
            expandable: true
        },
    })
});

});