jQuery - colorpicker each() and $ (this)

Question

색상 선택 도구를 http://www.eyecon.ro/colorpicker/에서 사용하고 있습니다.하지만이 기능은 훌륭하지만 페이지에 여러 색상 입력이 필요하지만 각각을 초기화하는 것은 정신 나간 것입니다. 그래서 초기화 코드를 each()에 넣고 this과 함께 포장했습니다. 배경색과 값을 변경하려고합니다. onchange. ID 또는 클래스를 사용하여 대상을 지정하면 올바르게 작동하지만 this으로 바뀌면 12 행과 13 행이 작동하지 않습니다. 처음 this은 각 입력을 대상으로 작동합니다.

왜 이런 일이 발생합니까? (또는하지 않고)

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, 즉 팝업이 아닌 입력.

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