Javascript 使用jQuery根据输入字段值更新backgroundColor LIVE？

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

我完全可以更改live的内容，正如您在这里看到的：

但是，我无法使用相同的原则在css方法中实现这一点：

---

谢谢

用户输入bgColor变量后，只需定义它即可。一把能做到这一点的小提琴

我所做的是复制bgcolor变量，并将其再次放入keyup函数中。这样，它在按下一个键后再次定义变量

---

小提琴工作得很好。

用户输入bgColor变量后，您只需定义它。一把能做到这一点的小提琴

我所做的是复制bgcolor变量，并将其再次放入keyup函数中。这样，它在按下一个键后再次定义变量

---

小提琴工作得很好。

您忘记了在更改输入时重新设置bgcolor变量：

试试这个：

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

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

---

您忘记了在更改输入时重新设置bgcolor变量：

试试这个：

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

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

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

您已将起始值指定给bgColor，但从未为其重新指定新值

.

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

您已将起始值指定给bgColor，但从未为其重新指定新值

.

您必须再次设置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);
        }
    });
});

您必须再次设置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);
        }
    });
});

您需要在.keyup处理程序中检索该字段的.val，因为每次用户按键时该值都会发生变化

将您的javascript更改为：

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

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

更新的JSFIDLE:

您需要检索.keyup处理程序中字段的.val，因为每次用户按键时该值都会改变

将您的javascript更改为：

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

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

---

更新的JSFIDLE:

这是一种我没有想到的更有效的方法。美好的这是一个我没有想到的更有效的方法。美好的