检测Joomla颜色表单字段中的变化

Question

我正在开发一个Joomla组件，我想在Color表单字段中检测onchange。

在我的模型的xml中，这是我定义颜色字段的方式

<field name="background_color" type="color" class="control-change"
label="COM_XXX_FORM_LBL_MAP_BACKGROUND_COLOR"
description="COM_XXX_FORM_DESC_MAP_BACKGROUND_COLOR" 
default="#afdce6" 
/>

Joomla框架创建以下HTML。它使用Minicolors作为颜色选择器

    <div class="control-group">
<div class="control-label"><label id="jform_background_color-lbl" for="jform_background_color" class="hasTooltip" title="" data-original-title="<strong>Background Color</strong><br />Background color">
Background Color</label></div>
<div id="background-color" class="controls"><span class="minicolors minicolors-theme-bootstrap minicolors-swatch-position-left minicolors-swatch-left minicolors-position-right"><span class="minicolors-swatch"><span style="background-color: rgb(175, 220, 230);"></span></span><input type="text" name="jform[background_color]" id="jform_background_color" value="#afdce6" placeholder="#rrggbb" class="minicolors control-change minicolors-input" data-position="right" data-control="hue" size="7" maxlength="7"><span class="minicolors-panel minicolors-slider-hue"><span class="minicolors-slider"><span class="minicolors-picker" style="top: 70.4545454545455px;"></span></span><span class="minicolors-opacity-slider"><span class="minicolors-picker"></span></span><span class="minicolors-grid" style="background-color: rgb(0, 208, 255);"><span class="minicolors-grid-inner"></span><span class="minicolors-picker" style="top: 14px; left: 36px;"><span></span></span></span></span></span>     </div>
</div> 

当我更改颜色选择器中的颜色时，输入字段的值不会更新，但颜色框的值会更改。我将在下面的屏幕截图中向您展示。

如何使用jquery获取颜色值？我需要它来更改背景颜色。

谢谢：）

Answer 1

获得第一个：

$(".minicolors-swatch span").css("background-color");

下一个是：

$("#jform_background_color").css("background-color");

要更新上述内容，只需使用以下代码。

$(".minicolors-swatch span").css("background-color", new_color);
$("#jform_background_color").css("background-color", new_color);

其中，new_color是您存储为"blue"（颜色）或"#f00"（十六进制代码）的新颜色。