동적/배열 ID가있는 자바 스크립트 함수

Question

자바 스크립트 함수의 동적 호출에 대한 질문이 있습니다. 여기에 내 문제가있다 :

내가 colorpicker를 포함하는 요소 (div) 있다고 가정 해 봅시다. 이 요소를 동적으로 (사용자가 원하는 횟수만큼) 사용/복제하고 싶습니다. 코드는 여기에서 볼 수 있습니다 : http://jsfiddle.net/CJhqc/1/ ID가 my_color라는 예를 들어 변수입니다

(그것의 여기 엉망 때문에 거기 테스트를 위해, 바이올린에 넣어 한)이 ColorPicker를 위해 전화처럼 보인다. 나는이 colorpicker 항목을 더 많이 가질 수 있도록 []을 입력에 추가했습니다. 이것은 괜찮습니다,이 요소를 5 개 가질 수 있으며이 입력을 각각 읽을 수 있습니다. 문제는 colorpicker 호출과 함께 제공됩니다.

jQuery(document).ready(function(){ 
    jQuery('#color_picker').children('div').css('backgroundColor', '<?php echo $value; ?>');  
    jQuery('#color_picker').ColorPicker({ 
     color: '<?php echo $value; ?>', 
     onShow: function (colpkr) { 
      jQuery(colpkr).fadeIn(500); 
      return false; 
     }, 
     onHide: function (colpkr) { 
      jQuery(colpkr).fadeOut(500); 
      return false; 
     }, 
     onChange: function (hsb, hex, rgb) {  
      jQuery('#color_picker').children('div').css('backgroundColor', '#'+ hex); 
      jQuery('#color_picker').next('input').attr('value','#'+ hex); 
     } 
    }); 
}); 

문제 : :이 항목의 해주기이있는 경우, 그들을 위해 자바 스크립트가 항상 같은입니다 colopicker 이제 다음 호출 id="color_picker" 있습니다. colorpicker 옆의 입력은 "배열"-><?php echo $id; ?>[]이지만이 항목 각각에 대해 colorpicker JavaScript를 설정하는 방법은 무엇입니까? 그리고 color_picker id -> color_picker[]을 제공 할 수 없습니다. 이제 두 번째 항목 (예를 들어)의 색상을 변경하려면 두 번째 항목이 아닌 첫 번째 항목의 색상이 변경됩니다. 각각의 자바 스크립트가 필요하다고 생각하지만 호출 방법은 무엇입니까?

미리 감사드립니다.

Answer 1

id 대신 색상 선택기 (이미 사용하고있는 colorSelector)를 사용하고, 오른쪽 자식과 입력 작업을 수행하기 위해 onChange 핸들러 내에 jQuery(this)을 참조하십시오. 나는 네가 원하는대로 일해야한다고 생각한다.

jQuery(document).ready(function(){ 
    //init all color pickers to the same $value 
    jQuery('.colorSelector').children('div').css('backgroundColor', '<?php echo $value; ?>');  
    //init ColorPicker handling for all color pickers 
    jQuery('.colorSelector').ColorPicker({ 
     color: '<?php echo $value; ?>', 
     onShow: function (colpkr) { 
      jQuery(colpkr).fadeIn(500); 
      return false; 
     }, 
     onHide: function (colpkr) { 
      jQuery(colpkr).fadeOut(500); 
      return false; 
     }, 
     //handle onChange individually 
     onChange: function (hsb, hex, rgb) {  
      jQuery(this).children('div').css('backgroundColor', '#'+ hex); 
      jQuery(this).next('input').attr('value','#'+ hex); 
     } 
    }); 
});