jQuery - colorpicker each() и $ (this)

Question

Я использую подборщик цветов от http://www.eyecon.ro/colorpicker/, и он отлично работает, но мне нужно несколько цветовых входов на странице, но инициализация каждого из них будет сумасшедшей. Поэтому я завернул код инициализации в each() в сопровождении this. Я пытаюсь изменить цвет фона и значение onchange. Он отлично работает, когда я нацелен на него с использованием идентификатора или класса, но при замене this строки 12 и 13 моей скрипки не работают. Первоначальный работает с таргетингом на каждый вход.

Почему это происходит? (Или нет, а)

jsfiddle: jsfiddle

Answer 1

Это не совсем ясно из документации, но Colorpicker хранит ссылку на элемент он призвал в JQuery-х data, и вы можете доступ к нему, как это.

$('.color-picker').ColorPicker({ 
    onShow: function (colpkr) { 
     $(colpkr).fadeIn(500); 
     return false; 
    }, 
    onHide: function (colpkr) { 
     $(colpkr).fadeOut(500); 
     return false; 
    }, 
    onChange: function (hsb, hex, rgb) { 
     var el = $(this).data('colorpicker').el; 
     $(el).css('backgroundColor', '#' + hex).val('#' + hex); 
    } 
}); 

Обратите внимание, что вам не нужно каждый цикл на всех, плагин инициализируется на всех элементах, соответствующих селектор

Причина, по которой не работает с this потому, что плагин устанавливает this для colorPicker, то есть окно, которое появляется, а не вход.

FIDDLE

Answer 2

Вы ссылаетесь неправильный this. Попробуйте определить переменную в методе внешней селекторной и использования, что вместо $(this):

$('.color-picker').each(function(){ 
    var self = $(this); 
    $(this).ColorPicker({ 
     onShow: function (colpkr) { 
      $(colpkr).fadeIn(500); 
      return false; 
     }, 
     onHide: function (colpkr) { 
      $(colpkr).fadeOut(500); 
      return false; 
     }, 
     onChange: function (hsb, hex, rgb) { 
      self.css('backgroundColor', '#' + hex); 
      self.val('#' + hex); 
     } 
    }); 
});