Javascript 同一页面中的多个颜色选择器

我正在为我的wordpress主题创建一个选项仪表板，我几乎可以处理所有的事情，但事情是这样的：我添加了一个颜色选择器，工作非常出色！如果您在输入字段中单击，将弹出一个颜色选择器，以便您可以选择颜色（或改为写入十六进制），然后如果您在颜色选择器外单击，它将消失

但是，如果我添加第二个，第一个输入弹出颜色选择器，并将颜色值带到两个输入，在弹出窗口外单击后，它不会消失。然后，如果我点击第二个输入，颜色选择器将不会弹出

在另一个场景中，如果我单击第一个和第二个，颜色选择器将弹出，但任何输入都将获取该值

我的代码是：

HTML和PHP：

case 'colorpicker':
?>

<div class="options_input options_text color-picker">

<input class="pickcolor" name="<?php echo $value['id']; ?>"
id="<?php echo $value['id']; ?>" type="<?php echo $value['type']; ?>"
value="<?php if ( get_option( $value['id'] ) != "") { 
echo stripslashes(get_option( $value['id'])  ); } else { echo $value['std']; } ?>" />

            <div id="colorpicker"></div>
</div>

<?php
break;

}))

}))

---

有人能帮我调整js，使其与多个twin字段一起工作吗？

不确定这是否仍然相关。。。但我在HTMLDrive上找到了做这个把戏的方法

基本上，它已经内置到farbtastic插件中。。。它只需要正确设置，然后您只需在某些操作中将选择器指定给所需的文本框

var farbPicker = $.farbtastic('#colorpicker');

$('.tbColourPicker').each(function ()
{
    farbPicker.linkTo(this);
})

$('.showColourPanel').click(function ()
{
     var targetObject = input you want to edit;
     farbPicker.linkTo(targetObject);
});

---

在使用选择器进行编辑之前，您只需注意文本框中是否有默认颜色值。

不确定这是否仍然相关。。。但我在HTMLDrive上找到了做这个把戏的方法

基本上，它已经内置到farbtastic插件中。。。它只需要正确设置，然后您只需在某些操作中将选择器指定给所需的文本框

var farbPicker = $.farbtastic('#colorpicker');

$('.tbColourPicker').each(function ()
{
    farbPicker.linkTo(this);
})

$('.showColourPanel').click(function ()
{
     var targetObject = input you want to edit;
     farbPicker.linkTo(targetObject);
});

---

在使用选择器进行编辑之前，您需要注意的唯一一件事是在文本框中设置默认颜色值。

需要一些技巧，但这是可能的

$（'div.colorpicker-component'）.colorpicker（）；
var ColorPickedDom=null；
$（文档）.ready（函数（）{
//新增
$（“body div#colorpicker_包装器”）。在（'click'，'div.colorpicker-component i.add_new_picker'，function（）上{
var UploadTemplate=$（'div#colorpicker_control_template'）.html（）；
$（'div#colorpocker_wrapper'）.append（UploadTemplate）；
});
//删除单击的
$（“body div#colorpicker_包装”）。在（'click'，'div.colorpicker-component i.remove_picker'，函数（）上{
$（this）.parent（）.closest（'div.colorpicker-component'）.remove（）；
});
//诀窍
$（'div#colorpicker _wrapper'）。在（'click'，'div.colorpicker-component span.color(picker)trick'，函数（e）{
ColorPickedDom=$（this.parent（）；
$（ColorPickedDom）.colorpicker（'show'）；
});
});
span.color\u picker\u技巧{
背景色：rgba（255,0,0,0）；
不透明度：0；
位置：绝对位置；
宽度：26px；
高度：30px；
光标：指针；
}

A.
新增
去除
A.
新增
需要一些技巧，但这是可能的


$（'div.colorpicker-component'）.colorpicker（）；
var ColorPickedDom=null；
$（文档）.ready（函数（）{
//新增
$（“body div#colorpicker_包装器”）。在（'click'，'div.colorpicker-component i.add_new_picker'，function（）上{
var UploadTemplate=$（'div#colorpicker_control_template'）.html（）；
$（'div#colorpocker_wrapper'）.append（UploadTemplate）；
});
//删除单击的
$（“body div#colorpicker_包装”）。在（'click'，'div.colorpicker-component i.remove_picker'，函数（）上{
$（this）.parent（）.closest（'div.colorpicker-component'）.remove（）；
});
//诀窍
$（'div#colorpicker _wrapper'）。在（'click'，'div.colorpicker-component span.color(picker)trick'，函数（e）{
ColorPickedDom=$（this.parent（）；
$（ColorPickedDom）.colorpicker（'show'）；
});
});
span.color\u picker\u技巧{
背景色：rgba（255,0,0,0）；
不透明度：0；
位置：绝对位置；
宽度：26px；
高度：30px；
光标：指针；
}

A.
新增
去除
A.
新增
您能显示生成的HTML吗？您不应该有多个具有相同id的元素（例如#colorpicker）…您可以显示生成的HTML吗？您不应该有多个具有相同id的元素（例如#colorpicker）。。。
var farbPicker = $.farbtastic('#colorpicker');

$('.tbColourPicker').each(function ()
{
    farbPicker.linkTo(this);
})

$('.showColourPanel').click(function ()
{
     var targetObject = input you want to edit;
     farbPicker.linkTo(targetObject);
});