javascript - JQuery:如何动态改变颜色？

Question

我正在使用 jumble.js 来混淆文本的颜色，但发现很难根据用户输入动态设置颜色。

用户使用spectrum.js调色板选择颜色。我可以从 rbg(xxx,xx,xx); 中剥离 rbg;至 xxx,xx,xx。但无法将其传递到困惑调用方法中。

这是我的代码。

 $(document).on('click', '#cypher-branding-jumble-text', function () {
            var colour1 = $("#cypher-branding-jumble-colour1").spectrum("get");
            var colour2 = $("#cypher-branding-jumble-colour2").spectrum("get");

            colour1 = colour1.toRgbString();
            colour1 = colour1.replace('rgb(', '');
            colour1 = colour1.replace(')', '');
            colour1 = colour1.replace(' ', '');

            colour2 = colour2.toRgbString();
            colour2 = colour2.replace('rgb(', '');
            colour2 = colour2.replace(')', '');
            colour2 = colour2.replace(' ', '');

            var colour_1 = [colour1];
            var colour_2 = [colour2];            

            $('#cypher-branding-main-edit-right-txt-text').jumble(colour_1,colour_2,true,false); 
        });

Jumble 插件 > https://github.com/vonKristoff/jumble

Answer 1

如果我正确地阅读了 Spectrum API，这应该可以减少字符串废话。我能够在 Spectrum 网站上验证“get”调用可以使用 toRgb()。

$(document).on('click', '#cypher-branding-jumble-text', function () {
    var colour1 = $("#cypher-branding-jumble-colour1").spectrum("get").toRgb();
    var colour2 = $("#cypher-branding-jumble-colour2").spectrum("get").toRgb();

    $('#cypher-branding-main-edit-right-txt-text')
    .jumble([colour1.r-0,colour1.g-0,colour1.b-0],[colour2.r-0,colour2.g-0,colour2.b-0],true,false); 
});

为什么有 #cypher-branding-jumble-text 的文档监听器，它应该只是 $('#cypher-branding-jumble-text').click(...) 吗？