Question

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

从Farbtastic返回的HSL颜色的格式如（色调，饱和度，亮度）。我正在调整第3个值，轻盈，那个部分有效。但所有重复都不起作用。它使所有新样本成为第一个样本的颜色。

    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部分，关于在主题选项 - 面板中使用Farbtastic的HSL，请参阅：Farbtastic convert HSL back to RGB or Hex

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

        var newcolor = hslcolor.slice(0);

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

Answer 1

这是你在找什么：http://jsfiddle.net/uttqX/6/ 它之所以不起作用，是因为你一遍又一遍地更新同一个变量，因为你在求结时将所有变量都分配给了同一个初始变量。因此，对这些变量中的任何一个的任何更新都会传播到初始变量（hslcolor），然后再传回所有其他变量。

从多次使用的函数中返回不同的值

1 个答案: