Javascript 带有.css（）连接问题的jQuery变量？

我正在尝试更改模糊按钮的CSS。我怀疑这可能是一个连接问题，但我无法找出我做错了什么。这是我的密码

HTML

<input type="text" value="blue" id="textinput">
<button>Button</button>
<span id="color">red</span>

jQuery

$("#textinput").blur(function () {
     setTimeout(function () {
          endColor = $("#textinput").val();
          $('button').css({ 
              'background-color' : endColor
              'background-image' : '-webkit-linear-gradient(top, #309ACB 0%,' + endColor + '100%)'       });
     }, 500);
});​

小提琴链接

当我删除渐变CSS时，效果很好。所以我猜我把变量连接错了。然而，我尝试了多种方法，但似乎无法解决它。这可能是非常明显的事情

---

另请注意。我正在使用webkit gradient以便在chrome或safari中进行测试。提前感谢您的帮助。

在保存颜色的变量和百分比字符串之间缺少一个空格

'-webkit-linear-gradient(top, #309ACB 0%,' + endColor + ' 100%)'
                                                        ^
                                                        |
                                                        +-- Here

调试这种情况的一个好方法是使用

console.log

查看连接字符串的结果。例如，在这种情况下，您将得到

red100%

，而不是

red100%

另一种不太容易出错的方法是使用

String.format（）

。这样，您可以（更）清楚地看到您是否遗漏了某些内容：

'-webkit-linear-gradient(top, #309ACB 0%, {0} 100%)'.format(endColor)

---

请注意，某些浏览器不支持此功能，但您可以使用pollyfill来定义它。

您缺少逗号和空格（请参阅Joao的答案）

$（“#文本输入”）.blur（函数（）{
setTimeout（函数（）{
endColor=$（“#textinput”）.val（）；
$（'button'）.css（{
“背景色”：endColor，//这边也是v这边
“背景图像”：“webkit线性渐变（顶部，#309ACB 0%，”+endColor+“100%）”；
}, 500);
});​

谢谢。。我以前确实有逗号。那是我的复制错误。我在小提琴里胡闹的时候忘了把它加进去。然而，空格才是问题的真正原因……是的，就是这样。我已经看了好半个小时了，但没有发现。有时只需要第二双眼睛。非常感谢。@Krisholenbeck:不客气。另一种不易出错的方法是使用

格式

。例如：

'-webkit线性渐变（顶部，#309ACB 0%，{0}100%）。格式（“红色”）

。这样，您可以很容易地看到空格的位置。我以前从未使用过.format（）。。谢谢你的信息。我甚至不知道那是jQuery库的一部分，不是。它是纯JavaScript，尽管有些浏览器不支持它。但是，您可以轻松地创建它。

'-webkit-linear-gradient(top, #309ACB 0%, {0} 100%)'.format(endColor)

$("#textinput").blur(function () {
     setTimeout(function () {
          endColor = $("#textinput").val();
          $('button').css({ 
              'background-color' : endColor, // < here        -> this way too               v here
              'background-image' : '-webkit-linear-gradient(top, #309ACB 0%,' + endColor + ' 100%)'       });
     }, 500);
});​