Question

我正在使用jQuery创建颜色选择器的codecademy.com课程，用户可以使用它来选择div的背景和边框颜色。你可以在这里看到它应该是什么样子（在练习4-3）。 http://www.codecademy.com/courses/basic-jquery/3#!/exercises/2基本上有一排彩色框可以单击以选择主div的不同属性的颜色。总共有三行（每行有许多彩色框）来选择我们可以设计样式的div的三个属性的颜色。

我的问题涉及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');
        }

    });

});

Answer 1

您没有遗漏任何内容，未使用makeColorOption功能。颜色选择器由$.each(colors,function(i,v)循环创建，其正文重复makeColorOption所做的。

您可以将该循环更改为：

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

并且它是等价的。

无法弄清楚这个功能是如何工作的

1 个答案: