如何在 jquery 颜色选择器中设置数字十六进制颜色？答案

【问题标题】：How to set the numeric hexadecimal colour in jquery color picker?如何在 jquery 颜色选择器中设置数字十六进制颜色？
【发布时间】：2016-03-09 07:34:41
【问题描述】：

我在我的 php 页面中使用了 JQuery colorpicker，但是当我在 javascript 中设置颜色时它不起作用。

这是我的 html 代码：

<div class="group_col grp_col_3">
    <div class="list_field">
        <label>Link Hover</label>
         <div class="color_field">
           <span class="colpr" style="background:#647993;"></span>
             <input name="style_link_hover_color" id="style_link_hover_color" type="text" data-value="647993" class="form-control&#x20;field&#x20;color-box&#x20;adv-settings" value="647993">    
</div>
</div>
</div>

这是我的 javascript 代码：

$(input).each(function (e) {
    var hex = '647993';
    $(this).val(hex);
    $(this).colpickSetColor(hex);
});

如何在 javascript 中设置这种颜色？

【问题讨论】：

你用的是哪个颜色选择器？
jq22.com/demo/colpick-jQuery-Color-Picker-master
如何使用$(this).css('background-color', '#'+hex);
如果我使用 $(this).css('background-color', '#'+hex);然后它使整个输入字段变为灰色，但我只想要跨度颜色应该灰色
您可能会看到上述链接的示例“使用 onChange 回调的 HEX 文本字段”

标签： javascript jquery color-picker

【解决方案1】：

我认为您使用的代码不正确，试图在颜色选择器的输入字段中设置值。你应该这样做：

在任意位置添加颜色选择器（如果尚未添加）：

<div id="picker"></div>

或

<button id="picker">Show Color Picker</button>

然后在javascript中，你需要：

如果你没有初始化就初始化：

$('#picker').colpick();

然后在你需要的时候改变它，并且在它被初始化之后：

var hex = '647993';
$('#picker').colpickSetColor(hex, false);

如果您还想更改输入字段，我认为您需要将第二个参数设置为 true。请注意，要更改的选择器与您用于初始化的选择器相同，并且应该是ID以避免出现问题。

var hex = '647993';
$('#picker').colpickSetColor(hex, true);

当然你需要在html代码中加载脚本和它的CSS。

【讨论】：

【解决方案2】：

这是我用来解决上述问题的代码

$(input).each(function (e) {
 var hex = 647993;
 if(!isNaN(hex)){
    hex = hex.toString();
}
$(this).val(hex);
$(this).colpickSetColor(hex);
});

这是因为 jquery 颜色选择器不适用于像 647993 这样的整数值。

【讨论】：