使用jQuery根據輸入字段值更新backgroundColor LIVE？

Question

我正在構建一個小腳本，基於各種輸入字段的值來改變頁面上的內容和CSS。

我能夠改變內容「活」精絕，你會在這裏看到：http://jsfiddle.net/tctc91/eQwsE/

我不能夠得到使用相同的原理雖與CSS法這方面的工作：http://jsfiddle.net/tctc91/Tnc8p/

謝謝！

Answer 1

與$(this).val()更換第二bgColor。

您已將起始值指定爲bgColor，然後您不會爲其重新分配新值。

jsFiddle。

Answer 2

您只需在用戶輸入它之後定義bgColor變量。 Here's這是一個小提琴。

我所做的是複製bgcolor變量並將其放置在keyup函數中。這樣，它在之後再次定義變量。

小提琴完美的作品。

Answer 3

你忘了重新設置將bgcolor變量，只要你改變輸入：

試試這個：

$(function() { 
    var bgColor = $('#colorpickerField1').val(); 
    $('body').css("backgroundColor",'#' + bgColor); 

    $('#colorpickerField1').change(function() { 
     var bgColor = $('#colorpickerField1').val(); 
     $('body').css("backgroundColor",'#' + bgColor); 
    }); 
}); 

Answer 4

您必須再次設置bgColor的值。我還添加了一點檢查，如果它的長度是3或6個字符。

$(function() { 
    var bgColor = $('#colorpickerField1').val(); 
    $('body').css("backgroundColor",'#' + bgColor); 

    $('#colorpickerField1').keyup(function() { 
     bgColor = $('#colorpickerField1').val(); 
     if(bgColor.length ==3 || bgcolor.length == 6) { 
      $('body').css("backgroundColor",'#' + bgColor); 
     } 
    }); 
}); 

Answer 5

您需要檢索字段內的.val()的.keyup()處理程序，爲價值總是會改變用戶每按下一個鍵的時間。

你的JavaScript更改爲：

$(function() { 
    var bgColor = $('#colorpickerField1').val(); 
    $('body').css("backgroundColor",'#' + bgColor); 

    $('#colorpickerField1').keyup(function() {  
     $('body').css("background-color",'#' + $(this).val()); 
    }); 
}); 

更新的jsfiddle：http://jsfiddle.net/Tnc8p/1/