如何动态创建许多Jquery颜色选择器(eyecon）

How to dynamically create many Jquery color pickers (eyecon)?

本文关键字：Jquery 颜色 选择器 eyecon 许多 创建 动态 何动态      更新时间：2023-09-26

我正在为CMS主题创建者使用这个jQuery颜色选择器：http://www.eyecon.ro/colorpicker/

它们目前为每个颜色选择器设置如下：

<div class="colorSelector" id="colorSelector3"><div style="background-color: #0000ff"></div></div>

有了这个javascript：

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

})；

问题是我需要创建大量的颜色选择器，如果有一个函数可以传递选择器的id和要更改的元素的id，那就太好了。这可能吗？

这不起作用：

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

我可以以某种方式动态创建函数吗？任何帮助都会很棒！谢谢

<div class="colorSelector" id="colorSelector3"><div style="background-color: #0000ff"></div></div>
<div class="colorSelector" id="colorSelector4"><div style="background-color: #0000ff"></div></div>
<script type="text/javascript">
function colorPickMulti(itemid, cp){
    $(cp).ColorPicker({
        color: '#0000ff',
        onShow: function (colpkr) {
            $(colpkr).fadeIn(500);
            return false;
        },
        onHide: function (colpkr) {
            $(colpkr).fadeOut(500);
            return false;
        },
        onChange: function (hsb, hex, rgb) {
            $(itemid).css('color', '#' + hex);
            $(cp + ' div').css('backgroundColor', '#' + hex);
        }
    });
}
$('#colorSelector3').click(function(){
    colorPickMulti('itemid', 'cp');
});
$('#colorSelector4').click(function(){
    colorPickMulti('itemid', 'cp');
});
</script>
相关文章：