jquery 的 .css() 和渐变

Question

我已经查看了几个问题，但我似乎无法让 .css() 与我想要的变量和渐变一起使用。您应该能够将两种颜色放入输入中，然后 BANG 它会给您一个渐变但没有骰子。有什么建议吗？

下面是我的JQ：

$(document).ready(function () {
var colorTop = $("#color1").keyup(function () {
    var color1 = $("#color1").val();
    $("#demo").css("background", color1);
});

var colorBottom = $("#color2").keyup(function () {
    var color2 = $("#color2").val();
    $("#demo").css("background", color2);
});

function changeGradient(colorTop, colorBottom) {
    $("#demo").css({
        background: 'linear-gradient(' + colorTop + ', ' + colorBottom + ')'
    });
};
});

https://jsfiddle.net/xyhjppph/3/

Answer 1

你没有在任何地方打电话给changeGradient。我建议添加一个按钮，当单击以更改背景时，该按钮将获取两个输入的输出。

点赞https://jsfiddle.net/jyh18cnk/1/

或者，如果您不想要该按钮，您可以将颜色变量设为全局变量

点赞https://jsfiddle.net/ao0escev/1/