4

ぼかしのボタンの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);
});​

フィドルリンク

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

グラデーションCSSを削除すると正常に動作します。だから私は変数を間違って連結していると推測しています。しかし、私はそれを複数の方法で試しましたが、それを理解できないようです。それはおそらく本当に明白なことです。

また、注意してください。私はWebkitグラデーションを使用しているので、クロムまたはサファリでテストします。助けてくれてありがとう。

4

2 に答える 2

6

色を保持している変数とパーセンテージ文字列の間に空白がありません。

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

この種の状況をデバッグする良い方法console.logは、連結された文字列の結果を確認するために使用することです。この場合、たとえば、red100%の代わりにを取得しますred 100%。

代わりに、imhoはエラーが発生しにくいので、を使用しますString.format()。このようにして、何かが足りないかどうかを（もっと）はっきりと確認できます。

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

一部のブラウザはこの機能をサポートしていませんが、このポリフィルを使用して定義できることに注意してください。

于 2012-08-30T19:36:12.293 に答える
5

カンマとスペースがありません（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);
});​
于 2012-08-30T19:37:09.620 に答える