Question

我正在为我的wordpress主题创建一个选项仪表板，我设法工作几乎所有东西，但这里是事情：我添加了一个颜色选择器并且工作超级！如果单击输入字段，将弹出一个颜色选择器，以便您可以选择一种颜色（或者改为编写十六进制），然后如果在颜色选择器外部单击，它就会消失。

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

在其他情况下，如果我先点击第二个，颜色选择器将会弹出，但任何输入都会取值。

我的代码是：

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：

jQuery(document).ready(function($) {
$('#colorpicker').hide();
$('#colorpicker').farbtastic('.pickcolor');

$('#color').click(function() {
    $('#colorpicker').fadeIn();
});

$(document).mousedown(function() {
    $('#colorpicker').each(function() {
        var display = $(this).css('display');
        if ( display == 'block' )
            $(this).fadeOut();
    });
});

}）;

jQuery(document).ready(function($) {

$('.pickcolor').click( function(e) {
colorPicker = jQuery(this).next('div');
input = jQuery(this).prev('input');
$(colorPicker).farbtastic(input);
colorPicker.show();
e.preventDefault();
$(document).mousedown( function() {
    $(colorPicker).hide();
});
});

}）;

任何人都可以帮我调整js以使其适用于多个双胞胎场吗？

Answer 1

不确定这是否仍然相关......但我在HTMLDrive上找到了this demo来完成这项工作。

基本上，它已经内置于farbtastic插件中...它只需要正确设置，然后你只需将选择器分配给某个动作所需的文本框。

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

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

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

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

Answer 2

需要一些技巧，但可能。

        $('div.colorpicker-component').colorpicker();

        var ColorPickedDom = null;
        $(document).ready(function () {

            // add new
            $("body div#colorpicker_wrapper").on('click', 'div.colorpicker-component i.add_new_picker', function() {
                var UploadTemplate = $('div#colorpicker_control_template').html();
                $('div#colorpicker_wrapper').append(UploadTemplate);
            });

            // remove clicked
            $("body div#colorpicker_wrapper").on('click', 'div.colorpicker-component i.remove_picker', function() {
                $(this).parent().closest('div.colorpicker-component').remove();
            });

            // the trick
            $('div#colorpicker_wrapper').on('click', 'div.colorpicker-component span.color_picker_trick', function(e) {
                ColorPickedDom = $(this).parent();
                $(ColorPickedDom).colorpicker('show');
            });

        });

span.color_picker_trick {
    background-color: rgba(255, 0, 0, 0);
    opacity: 0;
    position: absolute;
    width: 26px;
    height: 30px;
    cursor: pointer;
}

    <div id="colorpicker_control_template" style="display: none">
        <div class="input-append color colorpicker-component" data-color="rgba(255,146,180,1)" data-color-format="rgba">
            <input type="text" class="input-medium" value="rgba(255,146,180,1)" readonly="">
            <span class="color_picker_trick">a</span><span class="add-on"><i style="background-color: rgba(255,146,180,1);"></i></span>
            <i class="btn add_new_picker" type="button" title="Add one more colorpicker">Add new</i>
            <i class="btn remove_picker" type="button" title="Remove this colorpicker">Remove</i>
        </div>
    </div>

    <div id="colorpicker_wrapper">
        <div class="input-append color colorpicker-component" data-color="rgba(255,146,180,1)" data-color-format="rgba">
            <input type="text" class="input-medium" value="rgba(255,146,180,1)" readonly="">
            <span class="color_picker_trick">a</span><span class="add-on"><i style="background-color: rgba(255,146,180,1);"></i></span>
            <i class="btn add_new_picker" type="button" title="Add one more colorpicker">Add new</i>
        </div>
    </div>

工作演示： https://codepen.io/cosmiclaca/pen/jOyvRKO

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

2 个答案: