0

我是 Javascript 和 jQuery 新手，无法调整以下脚本：

http://jsfiddle.net/kJdX3/

如所写，它从一组颜色值中找到最接近的颜色。

我怎么能编辑代码，而不是评估这个数组中的颜色值：

var base_colors=["660000","0066cc","ff9900"];

它将评估 JSON 数组中的 hexvalue 属性，如下所示：

var base_colors = [
    { "name" : "burgundy" , "number" : "17A" , "hexvalue" : "660000"}, 
    { "name" : "blue" , "number" : "18B ", "hexvalue" : "0066cc"}, 
    { "name" : "orange" , "number" : "19C" , "hexvalue" : "ff9900"}];

最后，如何使用 jQuery 引用包含 base_colors 数组的外部 JSON 文件？

4

2 回答 2

1

我已经对您的 jsFiddle 进行了更改，以实现这一目标。

http://jsfiddle.net/kJdX3/9/

function getSimilarColors (color) {
    var base_colors = [
{ "name" : "burgundy" , "number" : "17A" , "hexvalue" : "660000"}, 
{ "name" : "blue" , "number" : "18B ", "hexvalue" : "0066cc"}, 
{ "name" : "orange" , "number" : "19C" , "hexvalue" : "ff9900"}];
    //Convert to RGB, then R, G, B
    var color_rgb = hex2rgb(color);
    var color_r = color_rgb.split(',')[0];
    var color_g = color_rgb.split(',')[1];
    var color_b = color_rgb.split(',')[2];

    //Create an emtyp array for the difference betwwen the colors
    var differenceArray=[];

    //Function to find the smallest value in an array
    Array.min = function( array ){
           return Math.min.apply( Math, array );
    };


    //Convert the HEX color in the array to RGB colors, split them up to R-G-B, then find out the difference between the "color" and the colors in the array
    $.each(base_colors, function(index, value) { 
        var base_color_rgb = hex2rgb(value.hexvalue);
        var base_colors_r = base_color_rgb.split(',')[0];
        var base_colors_g = base_color_rgb.split(',')[1];
        var base_colors_b = base_color_rgb.split(',')[2];

        //Add the difference to the differenceArray
        differenceArray.push(Math.sqrt((color_r-base_colors_r)*(color_r-base_colors_r)+(color_g-base_colors_g)*(color_g-base_colors_g)+(color_b-base_colors_b)*(color_b-base_colors_b)));
    });

    //Get the lowest number from the differenceArray
    var lowest = Array.min(differenceArray);

    //Get the index for that lowest number
    var index = differenceArray.indexOf(lowest);

    //Function to convert HEX to RGB
    function hex2rgb( colour ) {
        var r,g,b;
        if ( colour.charAt(0) == '#' ) {
            colour = colour.substr(1);
        }

        r = colour.charAt(0) + colour.charAt(1);
        g = colour.charAt(2) + colour.charAt(3);
        b = colour.charAt(4) + colour.charAt(5);

        r = parseInt( r,16 );
        g = parseInt( g,16 );
        b = parseInt( b ,16);
        return r+','+g+','+b;
    }

    //Return the HEX code
    return base_colors[index].hexvalue;
}

这是我更改的内容：

var base_color_rgb = hex2rgb(value.hexvalue);

return base_colors[index].hexvalue;

于 2013-02-07T17:01:40.967 回答
0

使用http://api.jquery.com/jQuery.getJSON/

$.getJSON(url, params, function(data) {
 // your json with colors
});

非常重要： json 应该是有效的！

于 2013-02-07T16:57:40.247 回答