jQuery - contrôle unique sur une classe en utilisant onChange

Question

J'utilise jQuery colorpicker sur une application. Lorsqu'une couleur est sélectionnée et sélectionnée, la couleur est affichée dans une classe d'envergure ".swatch". Cependant, lorsqu'il existe deux options de sélection de couleur sur une seule page, la commande span.swatch affiche la même couleur que la couleur sélectionnée. (voir capture d'écran).

Screenshot ici: http://cl.ly/2MUU

Voici le code que je utilise

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

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

Cela devrait fonctionner - Havent essayé moi-même cependant.

Answer 2

Essayez cette

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