1

我正在为我的 wordpress 主题创建一个选项仪表板，并且我设法完成了几乎所有工作，但事情是这样的：我添加了一个颜色选择器并且工作得非常好！如果单击输入字段，将弹出一个颜色选择器，以便您选择一种颜色（或改写 HEX），然后如果您在颜色选择器外部单击，它就会消失。

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

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

我的代码是这样的：

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 使其适用于多个孪生字段？

4

2 回答 2

1

不确定这是否仍然相关......但我在 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);
});

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

于 2014-01-16T04:40:13.580 回答
0

需要一些技巧，但可能。

        $('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

于 2021-04-19T20:25:37.067 回答