2012-09-05 3 views
-1

jquery를 사용하여 div의 배경색과 테두리 색상을 선택할 수있는 색상 선택 도구를 만드는 codecademy.com 강의를 진행하고 있습니다. 여기서 볼 수있는 것이 무엇인지 알 수 있습니다 (연습 4-3). http://www.codecademy.com/courses/basic-jquery/3#!/exercises/2 기본적으로 주 상자의 여러 속성의 색을 선택하기 위해 클릭 한 색 상자가 있습니다. 전체적으로 우리가 스타일을 지정할 수있는 div의 3 가지 속성의 색상을 선택하기 위해 3 개의 행 (각각 색칠 된 상자가 많음)이 있습니다.이 함수의 작동 방식을 알 수 없음

제 질문은 makeColorOption 함수와 관련이 있습니다. color 매개 변수에 "colorOption"클래스를 추가했지만 전달 된 색상으로 호출 된이 함수가 표시되지 않습니다. 배열의 각 색상에 대해 한 번 호출해야한다고 가정합니다. 그러나 어디에서나 해당 색상이 표시되는 것을 보지 못합니다.

내가 누락 된 부분을 설명 할 수있는 사람이 있습니까? 당신은 아무것도 누락하지 않을

 $('document').ready(function(){ 

    //make the color pickers 
    var colors = ['red','green','blue','yellow','black','white']; 

    function makeColorOption(color) { 
     return $('<div/>') 
        .addClass("colorOption") 
        .html(color) 
        .css('background-color',color); 
    } 

    $.each(colors,function(i,v) { 
     $('div.colorPicker').append(
      $('<div/>') 
        .addClass("colorOption") 
        .html(v) 
        .css('background-color',v) 
     ); 
    }); 

    $('div.colorPicker').append($('<div/>').addClass('clearfix')); 


    $('div.colorOption').click(function(){ 

     var $this = $(this); 

     var target = $this.closest('div.colorPicker').data('styleTarget'); 
     switch(target) { 
      case 'background-color': 
       setBackgroundColor($('#toy'),$this.html()); 
       break; 
      case 'text-color': 
       setTextColor($('#toy'),$this.html()); 
       break; 
      case 'border-color': 
       setBorderColor($('#toy'),$this.html()); 
       break; 
      default: 
       alert('hi'); 
     } 

    }); 

}); 
+2

['jQuery.each'] (http://api.jquery.com/jquery.each) – zzzzBov

+0

의 문서를 읽으십시오. 자바 스크립트의 네이티브 (var in object) 반복자를 사용하지 않는 이유가 무엇입니까? –

+0

각 함수에 대해 생각했지만 makeColorOption을 호출하지 않았습니다. 각 매개 변수의 함수를 makeColorOption과 연결하는 방법은 무엇입니까? – BrainLikeADullPencil

답변

0

makeColorOption 기능은 사용되지 않습니다. 색상 선택기는 $.each(colors,function(i,v) 루프에 의해 만들어지며 몸체는 makeColorOption과 같습니다.

당신은 해당 루프를 변경할 수 있습니다 :

$.each(colors,function(i,v) { 
     $('div.colorPicker').append(makeColorOption(v)); 
    }); 

을 그리고 해당 될 것이다.

관련 문제