jQuery 颜色选择器 - 动态选择器答案

【问题标题】：jQuery Colour Picker - Dynamic SelectorjQuery 颜色选择器 - 动态选择器
【发布时间】：2011-02-22 19:25:52
【问题描述】：

嘿伙计们，基本上我想要做的是为我页面上的所有颜色选择器使用一个实例。我使用的代码是这样的。

$('.color').ColorPicker({ 
        color: '#0000ff',
    onShow: function (colpkr) { $(colpkr).fadeIn(500); return false; },
    onHide: function (colpkr) { $(colpkr).fadeOut(500); return false; },
    onChange: function () { $(this).css('backgroundColor', '#' + hex);}
});

问题是，onChange 函数并没有选择 $(this) 作为选择器单击，而是改变了颜色选择器 ui 本身的颜色。

如何在页面上的任何颜色选择器保持动态的同时引用实际值？

我使用的插件是http://www.eyecon.ro/colorpicker/

谢谢，沃伦

【问题讨论】：

你试过background-color 吗？>
顺便说一句，hex 似乎有点奇怪 :) 和undefined 可能是结果
如果我通过其附加的类引用选择器，一切正常，但是它会更改所有具有相同名称的类的选择框上的颜色。我希望它只更改选中的框。
看看演示。它现在按预期工作。

标签： javascript jquery colors jquery-selectors

【解决方案1】：

演示： http://so.devilmaycode.it/jquery-colour-picker-dynamic-selector

$(function() {
  $('.color').ColorPicker({
  color: '#0000ff',
  onShow: function (colpkr) { $(colpkr).fadeIn(500); return false; },
  onHide: function (colpkr) { $(colpkr).fadeOut(500); return false; },
  onSubmit: function(hsb, hex, rgb, el) {
    $(el).val(hex);
    $(el).ColorPickerHide();
    $(el).css('backgroundColor', '#' +hex);
  }});  
});

【讨论】：

尝试加载 colorpicker.* 文件时出现 403 错误