Question

我在应用上使用jQuery colorpicker。选择并选择颜色后，颜色将显示在范围类“.swatch”中。但是，如果单个页面上有两个颜色选择选项，则span.swatch将显示与选择颜色相同的颜色。（见截图）。

这是我正在使用的代码

jQuery('.colorselect').ColorPicker({
    onSubmit: function ( hsb, hex, rgb, el ) {
        jQuery(el).val(hex);
        jQuery(el).ColorPickerHide();
    },
    onBeforeShow: function () {
        jQuery(this).ColorPickerSetColor(this.value);
    },
    onChange: function (hsb, hex, rgb) {
        jQuery('.swatch').css('backgroundColor', '#' + hex);
    }
})

Answer 1

试试这个

$.each($('.colorselect'),function(){
    var $target = $(this);
    $(this).ColorPicker({
            onSubmit: function ( hsb, hex, rgb, el ) {
                           jQuery(el).val(hex);
                           jQuery(el).ColorPickerHide();
            },
            onBeforeShow: function () {
                     jQuery(this).ColorPickerSetColor(this.value);
            },
            onChange: function (hsb, hex, rgb) {
                     $target.find('.swatch').css('backgroundColor', '#'+hex);
            }
    });
});

Answer 2

onChange: function (hsb, hex, rgb) { 
        jQuery(this).find('.swatch').css('backgroundColor', '#' + hex); 
    }

这应该有效 - 尽管我自己也没试过。

jQuery - 使用onChange对类进行独特控制

2 个答案: