無法弄清楚這個函數是如何工作的

-1

我正在研究一個使用jQuery創建顏色選擇器的codecademy.com課程，用戶可以使用它選擇div的背景和邊框顏色。你可以看到它應該看起來像在這裏（練習4-3）。 http://www.codecademy.com/courses/basic-jquery/3#!/exercises/2基本上有一排彩色框，您可以點擊選擇主div不同屬性的顏色。總共有三行（每個都有許多彩色框）選擇我們可以設置的div的三個屬性的顏色。無法弄清楚這個函數是如何工作的

我的問題涉及到makeColorOption函數。它爲顏色參數添加一個類「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'); 
     } 

    }); 

});

來源

2012-09-05 BrainLikeADullPencil

閱讀['jQuery.each']（http://api.jquery.com/jquery.each）上的文檔 – zzzzBov

是否有一個原因，你不只是使用JavaScript的原生（對象）迭代器的（var）？ –

我想到了每個函數，但它並沒有調用makeColorOption。 .each如何將其參數中的函數與makeColorOption關聯起來？ – BrainLikeADullPencil

您不會錯過任何東西，不使用makeColorOption功能。顏色選擇器正在由$.each(colors,function(i,v)循環創建，其循環體與makeColorOption相同。

你可以改變環路：

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

，這將是等效的。

來源

2012-09-05 23:49:29 Barmar

無法弄清楚這個函數是如何工作的

回答

相關問題