在Wordpress中的输入文本字段中显示颜色选择器值代码

Question

您好我的主题选项页面我在我的选项页面中使用了颜色选择器jquery插件，如下图所示。

我想当我从颜色选择器更改颜色时自动在文本字段中显示颜色值代码。我可以这样做吗？

这是我的选项页面中与出现颜色选择器和文本字段相关的代码

用于注册选项设置

function YPE_register_settings_sections_fields() {

    register_setting (
        'YPE_header_option_group', 
        'YPE_header_option_name',
        'YPE_sanitize_validate_callback'
    );
    add_settings_section (
        'YPE_header_section', 
        'Header Section', 
        'YPE_header_section_callback', 
        'YPE_menu_page_options'
    );
    add_settings_field (
        'YPE_header_bg', 
        'Header Background', 
        'YPE_header_bg_callback', 
        'YPE_menu_page_options',
        'YPE_header_section'
    );
}
 add_action('admin_init', 'YPE_register_settings_sections_fields');

显示文本字段和颜色选择器的功能

function YPE_header_bg_callback() {
    $YPE_options = get_option('YPE_header_option_name');
    $YPE_header_bg = isset($YPE_options['YPE_header_bg']) ? $YPE_options['YPE_header_bg'] : '';

    ?>
        <div class="input-group color-picker">
            <input class="form-control" style="width:80px;"  name="YPE_header_option_name[YPE_header_bg]" id="<?php echo 'YPE_header_bg'; ?>" type="text" value="<?php echo $YPE_header_bg; ?>" /> 
            <span class="input-group-btn">
                <div id="colorSelector">
                    <div nam style="background-color: #0000ff">  
                    </div>
                </div>
            </span>
        </div>

        <script>
            $("#colorSelector").ColorPicker({
                color: '#0000ff',
                onShow: function (colpkr) {
                    $(colpkr).fadeIn(500);
                    return false;
                },
                onHide: function (colpkr) {
                    $(colpkr).fadeOut(500);
                    return false;
                },
                onChange: function (hsb, hex, rgb) {
                    $('#colorSelector div').css('backgroundColor', '#' + hex);
            });
        </script>
    <?php
}

如果您可以阅读错误并帮助我解决问题，这是我的控制台JavaScript错误

Answer 1

您只需在onChange方法上添加以下代码行，我假设您的颜色输入框ID为YPE_header_bg：

onChange: function (hsb, hex, rgb) {
    $('#colorSelector div').css('backgroundColor', '#' + hex);
    $('#YPE_header_bg').val('#' + hex);

Answer 2

您的代码中存在多个问题......

在WordPress uses jQuery模式下
• noConflict()，因此您需要使用jQuery而不是$。
• 在}函数之后缺少一个结束大括号onChange。
• 您的return false;和onShow函数无需onHide。
• 向您的onChange功能添加代码，为您的hex #YPE_header_bg元素分配input值。

示例代码：

<script>
jQuery("#colorSelector").ColorPicker({
    color: '#0000ff',
    onShow: function (colpkr) {
        jQuery(colpkr).fadeIn(500);
    },
    onHide: function (colpkr) {
        jQuery(colpkr).fadeOut(500);
    },
    onChange: function (hsb, hex, rgb) {
        jQuery('#colorSelector div').css('backgroundColor', '#' + hex);
        jQuery('#YPE_header_bg').val('#' + hex);
    }
});
</script>