javascript - 自定义 jQuery 渐变颜色选择器 - 使其成为 'user-friendly'

Question

所以，我做了 a very simple custom jQuery gradient color picker ，用户可以将某些 HTML 元素的颜色更改为他们想要的任何渐变。然而，问题是没有多少人知道如何创建渐变。每次都这样做会很麻烦。比如，说:

#id {
background: linear-gradient(to right, blue, red);
}

对于那个，用户每次都必须输入它才能在左 -> 右方向上实现蓝色 -> 红色的渐变。因此，我试图创建 a script这一切都简化了。但是，如您所见，它实际上不起作用。

基本上，我创建了 3 个输入框:一个用于渐变运动(例如，向右、向左等)，一个用于开始渐变颜色，一个用于结束渐变颜色。用户将填写这些值，我将使用 .val() 获取所有这些值，然后创建一个包含此值的最终变量:

'linear-gradient(to gradientMotionVariable, beginningGradientColor, endingGradientColor)'

最后，将 div 的背景属性更改为该变量。我尝试为此搜索 Google 和 SO，但找不到任何东西。任何帮助将不胜感激。

Answer 1

$(document).ready(function () {
    $('#sgCp').click(function () {
        var gM = $('#cGp-motion').val();
        var bC = $('#cGp-bC').val();
        var eC = $('#cGp-eC').val();
        var FGC = 'linear-gradient(to ' + gM + ', ' + bC + ', ' + eC + ')';
        $('#cPr').css('background', FGC);
    });
});

您的代码存在的问题是，您向 css 传递的值实际上并未使用变量值，而是传入了变量名。

看看你的:

var FGC = 'linear-gradient(to gM, bC, eC)';

与我的相比:

var FGC = 'linear-gradient(to ' + gM + ', ' + bC + ', ' + eC + ')';