带有 .css() 连接问题的 jQuery 变量？

Question

我正在尝试更改模糊按钮的 CSS。我怀疑这可能是一个串联问题，但我无法弄清楚我做错了什么。这是我的代码...

HTML

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

CSS

button {
 background-color:blue;
 background-image: -webkit-linear-gradient(top, white 0%, black 100%);    
}

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);
});​

FIDDLE 链接

http://jsfiddle.net/krishollenbeck/p2jah/20/

当我删除渐变 CSS 时它工作正常。所以我猜我连接变量是错误的。但是我已经尝试了多种方法，但似乎无法弄清楚。这可能是非常明显的事情。

还要注意。我正在使用 webkit 渐变，所以在 chrome 或 safari 中进行测试。提前感谢您的帮助。

Answer 1

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

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

调试这种情况的一个好方法是使用console.log 来查看连接字符串的结果。例如，在这种情况下，您会得到 red100% 而不是 red 100%。

恕我直言，一种不太容易出错的替代方法是使用String.format()。这样，您可以（更）清楚地看到您是否遗漏了什么：

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

_{注意部分浏览器不支持该功能，但可以使用thispollyfill 来定义。}

Answer 2

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

$("#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);
});​