Question

我正在为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);
}
});
}

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

Answer 1

<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>

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

1 个答案: