[英]jQuery Variable with .css() concatenation issue?
I am trying to change CSS of a button on blur. 我正在尝试更改模糊按钮的CSS。 I suspect it might be a concatenation issue but am unable to figure out what I am doing wrong. 我怀疑这可能是串联问题,但无法弄清楚我在做什么错。 Here is my code... 这是我的代码...
HTML 的HTML
<input type="text" value="blue" id="textinput">
<button>Button</button>
<span id="color">red</span>
CSS 的CSS
button {
background-color:blue;
background-image: -webkit-linear-gradient(top, white 0%, black 100%);
}
jQuery 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 LINK 链接
http://jsfiddle.net/krishollenbeck/p2jah/20/ http://jsfiddle.net/krishollenbeck/p2jah/20/
It works fine when I remove the gradient CSS. 当我删除渐变CSS时,它工作正常。 So I am guessing I am concatenating the variable wrong. 所以我猜我是错误地串联了变量。 However I have tried it multiple ways but just can't seem to figure it out. 但是,我已经尝试了多种方法,但是似乎无法弄清楚。 It is probably something really obvious. 这可能确实很明显。
Also note. 另请注意。 I am using webkit gradient so test in chrome or safari. 我正在使用Webkit渐变,因此请在Chrome或Safari中测试。 Thanks in advance for the help. 在此先感谢您的帮助。
You are missing a whitespace between your variable holding the color and the percentage string. 您缺少包含颜色的变量和百分比字符串之间的空格 。
'-webkit-linear-gradient(top, #309ACB 0%,' + endColor + ' 100%)'
^
|
+-- Here
A good way to debug this kind of situations is to use console.log
to see the result of the concatenated string. 调试这种情况的一种好方法是使用console.log
查看串联字符串的结果。 In this case, for example, you'd get red100%
instead of red 100%
. 例如,在这种情况下,您将获得red100%
而不是red 100%
。
An alternative, which imho, is less error-prone, is to use String.format()
. 恕我直言,一种不太容易出错的替代方法是使用String.format()
。 This way, you can (more) clearly see if you are missing something: 这样,您可以(更多)清楚地看到是否缺少某些东西:
'-webkit-linear-gradient(top, #309ACB 0%, {0} 100%)'.format(endColor)
Note that some browsers don't support this function, but you can use this pollyfill to define it. 请注意,某些浏览器不支持此功能,但是您可以使用此 pollyfill对其进行定义。
You're missing a comma, and space (see Joao's answer) 您缺少逗号和空格(请参见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);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.