jquery - 入力変更時にcssを変更します

Question

なぜ「赤」で動作するのですか

var inputButtonColor = $('input#button-color');

inputButtonColor.change(function() {
  var inputButtonColorValue = inputButtonColor.val();
  alert(inputButtonColorValue);
  $('input.write-review').css({"background-color": "red" });
});

http://jsfiddle.net/f4ngg/2/

そして、これは「inputButtonColor.val（）」ではありません

var inputButtonColor = $('input#button-color');

inputButtonColor.change(function() {
  var inputButtonColorValue = inputButtonColor.val();
  alert(inputButtonColorValue);
  $('input.write-review').css({"background-color": inputButtonColorValue });
});

http://jsfiddle.net/f4ngg/1/

Answer 1

二重引用符の外側の変数を削除する必要があります。そうしないと、文字列として扱われます。修正された行：

 $('iframe').contents().find('input.write-review').css({"background-color": inputButtonColor.val()});

お役に立てば幸いです。

Answer 2

テキストボックスからの入力としてカラーコードを使用しています。カラーに変更する場合は、カラーコードの前に追加する必要があり#ます。

したがって、コードは次のようになります。

var inputButtonColor = $('input#button-color');

inputButtonColor.change(function() {
  var inputButtonColorValue = inputButtonColor.val();
  alert(inputButtonColorValue);
  $('input.write-review').css({"background-color": "#" + inputButtonColor.val() });
});

デモ