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

Answer 2

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

Это должно сработать - хотя сам не пробовал.