Question

我正在构建一个小脚本，根据各种输入字段的值，在页面上实时更改内容和css。

我可以将“直播”内容改为绝对正常，如您所见：http://jsfiddle.net/tctc91/eQwsE/

我无法使用相同的原则使用css方法：http://jsfiddle.net/tctc91/Tnc8p/

谢谢！

Answer 1

将第二个bgColor替换为$(this).val()。

您已将起始值指定为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

您需要检索<{1}}处理程序中字段的.val()，因为每次用户按下某个键时，该值都会一直在变化。

将您的javascript更改为：

.keyup()

更新了jsFiddle：http://jsfiddle.net/Tnc8p/1/

使用jQuery基于输入字段值更新backgroundColor LIVE？

5 个答案: