-1

私は、jQueryを使用してカラーピッカーを作成するcodecademy.comレッスンに取り組んでいます。これを使用して、ユーザーはdivの背景色と境界線の色を選択できます。ここで、どのように表示されるかを確認できます（演習4-3）。 http://www.codecademy.com/courses/basic-jquery/3#!/exercises/2 基本的に、メインdivのさまざまな属性の色を選択するためにクリックする色付きのボックスの列があります。合計で3つの行（それぞれに多くの色付きのボックスがあります）があり、スタイルを設定できるdivの3つの属性の色を選択します。

私の質問はmakeColorOption関数に関するものです。colorパラメータにクラス「colorOption」を追加していますが、色が渡された状態でこの関数が呼び出されることはありません。配列内の色ごとに1回呼び出す必要があると思いますが、どこでもそうなることはありません。

私が何かを逃しているかどうか誰かが説明できますか？

        $('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');
        }

    });

});
4

1 に答える 1

0

あなたは何も見逃していません、makeColorOption関数は使用されていません。カラーピッカーはループによって作成されており$.each(colors,function(i,v)、その本体はループによって作成されてmakeColorOptionいます。

そのループを次のように変更できます。

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

そしてそれは同等です。

于 2012-09-05T23:49:29.407 に答える