Question

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

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

对于那个，用户每次都必须输入以实现蓝色渐变 - ＆gt;左边是红色 - ＆gt;正确的方向。因此，我尝试创建简化了所有内容的a script。但是，正如您所看到的，它并没有真正起作用。

基本上，我创建了3个输入框：一个用于渐变运动（例如，右，左等），一个用于开始渐变颜色，一个用于结束渐变颜色。用户会填写这些值，我会用.val（）抓取它们，然后创建一个包含该值的最终变量：

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

然后，最后，将div的background属性更改为该变量。我尝试搜索谷歌和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 + ')';

自定义jQuery渐变颜色选择器 - 使其“用户友好”

1 个答案: