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

Question

我在应用程序上使用 jQuery colorpicker。当选择并正在选择一种颜色时，该颜色将显示在跨度类“.swatch”中。但是，当单个页面上有两个颜色选择选项时，span.swatch 将显示与所选颜色相同的颜色。 (参见屏幕截图)。

屏幕截图:http://cl.ly/2MUU

这是我正在使用的代码

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);
            }
    });
});