Question

我正在使用以下提供的插件颜色选择器：eyecon 基本上我想要做的是每次用户更改hex上的颜色时获取控件的ColorPicker颜色。这是我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" href="css/colorpicker.css" type="text/css" />
<link rel="stylesheet" media="screen" type="text/css" href="css/layout.css" />
<title>ColorPicker - jQuery plugin</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/colorpicker.js"></script>
<script type="text/javascript" src="js/eye.js"></script>
<script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript" src="js/layout.js?ver=1.0.2"></script>
</head>
<body>
<div id="colorSelector"><div style="background-color: rgb(62, 62, 189); "></div></div>
<input type="text" maxlength="6" size="6" id="mycolor" value="00ff00">
</body>
</html>
<script>
$(document).ready(function() 
{
    console.log("Function enabled");
    var currentHex = '#38ff56';

    $('#colorSelector').ColorPicker(
    {
        color: currentHex,
        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);
            $('#mycolor').val(hex);
        }
    });

});
</script>

但似乎onChange事件没有触发..没有控制台错误，并且在网络中所有库组件都正确加载。我做错了什么？

Answer 1

尝试更改选择器：

 $('#mycolor').ColorPicker({
     options
  });

Answer 2

你的问题是添加我猜的CSS

改变这个：

    $('#colorSelector div').css('backgroundColor', '#' + hex);

由此：

    $('#colorSelector div').css('background-color', '#' + hex);

Answer 3

尝试

$('#colorSelector div').css('background-color', '#' + hex);

你确定你必须在'hex'之前加上'＃'吗？

无法处理颜色选择器上的onChange事件

3 个答案: