不能处理颜色选择器上的onChange事件

Can't handle onChange event on color picker

本文关键字：onChange 事件 选择器 处理 颜色 不能      更新时间：2023-09-26

我使用的插件颜色选择器由:eyeecon提供基本上，我要做的是每次用户改变ColorPicker上的颜色时，获得控件的hex颜色。这是我的代码:

<!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事件不是触发…没有控制台错误，并且在网络中所有库组件都正确加载。我做错了什么?

你的问题是添加css I/gues

改变:

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

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

尝试更改选择器:

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

try with

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

，你确定你必须把'#'前十六进制?

相关文章：