0

我有一个只能工作一次的功能。我确定那是因为它说“返回”并且我没有任何循环等。有人可以帮我取消这个功能吗？（这一切都在一个 jQuery 容器中，尽管我认为 jQuery 可能与这个问题没有太大关系。）

从 Farbtastic 返回的 HSL 颜色的格式类似于（色调、饱和度、亮度）。我正在调整第三个值，亮度，这部分工作。虽然所有的重复都不起作用。它使所有新色板都成为第一个色板的颜色。 

    function onColorChange(color) {

        // retrieve HSL color value
        var hslcolor = $.farbtastic('#main_color_picker').hsl;

        // create 4 new colors of varying brightness, and variable names to save them to db.
                var newcolor1 = hslcolor;
                var newcolor2 = hslcolor;
                var newcolor3 = hslcolor;
                var newcolor4 = hslcolor;
                    newcolor1[2] = 0.10 * (Math.round(hslcolor[2]*10000)/10000);
                    newcolor2[2] = 0.85 * (Math.round(hslcolor[2]*10000)/10000);
                    newcolor3[2] = 1.15 * (Math.round(hslcolor[2]*10000)/10000);
                    newcolor4[2] = 1.50 * (Math.round(hslcolor[2]*10000)/10000);
                var rgb1 = hsl2rgb(newcolor1);
                var rgb2 = hsl2rgb(newcolor2);
                var rgb3 = hsl2rgb(newcolor3);
                var rgb4 = hsl2rgb(newcolor4);

        //apply the color to swatches and show original swatch in the middle.
        var firstSwatch = $('#section-main_color').find('.square1');
        firstSwatch.css( 'background-color', 'rgb('+rgb1.r+','+rgb1.g+','+rgb1.b+')' );
        var secondSwatch = $('#section-main_color').find('.square2');
        secondSwatch.css('background-color', 'rgb('+rgb2.r+','+rgb2.g+','+rgb2.b+')');
                    // original color is in square 3 
        var fourthSwatch = $('#section-main_color').find('.square4');
        fourthSwatch.css('background-color', 'rgb('+rgb3.r+','+rgb3.g+','+rgb3.b+')');
        var fifthSwatch = $('#section-main_color').find('.square5');
        fifthSwatch.css('background-color', 'rgb('+rgb4.r+','+rgb4.g+','+rgb4.b+')');

    }

function hsl2rgb(hsl) {
    var h = hsl[0], s = hsl[1], l = hsl[2];
    var m1, m2, hue;
    var r, g, b
    h = (Math.round( 360*h )/1);
    if (s == 0)
        r = g = b = (l * 255);
    else {
        if (l <= 0.5)
            m2 = l * (s + 1);
        else
            m2 = l + s - l * s;
        m1 = l * 2 - m2;
        hue = h / 360;
        r = Math.round(HueToRgb(m1, m2, hue + 1/3));
        g = Math.round(HueToRgb(m1, m2, hue));
        b = Math.round(HueToRgb(m1, m2, hue - 1/3));
    }
    return {r: r, g: g, b: b};
}

对于这个问题的第 1 部分，关于在 Theme-Options-Panel 中使用 Farbtastic 的 HSL，请参阅：Farbtastic 将 HSL 转换回 RGB 或 Hex

跟进： 如果您需要数组的实际副本，我发现了这一点：

        var newcolor = hslcolor.slice(0);

在大多数情况下避免使用它可能是个好主意。我发现我需要按原样保留原始数组，以便在另一组计算中使用，所以我在副本上做了我的亮度。

4

1 回答 1

0

这是您要查找的内容吗：http: //jsfiddle.net/uttqX/6/ 它不起作用的原因是因为您一遍又一遍地更新同一个变量，因为您将所有变量分配给相同的乞讨中的初始变量。因此，对这些变量中的任何一个的任何更新都会传播到初始变量（hslcolor），然后再传播到所有其他变量。

于 2012-08-06T02:21:02.137 回答