Question

我有这个代码用jquery colorpicker，onchange输入#color显示十六进制的输入值; 我怎么能在变化时获得颜色值？

<body>
<div id="red"></div>
<div id="green"></div>
<div id="blue"></div>
<div id="swatch" class="ui-widget-content ui-corner-all"></div>
<input type="text" id="color">

脚本：refreshSwatch是一个获取滑块颜色值的函数，它可以工作;

 function refreshSwatch(evt, ui) {
    var red = $("#red").slider("value"),
            green = $("#green").slider("option", "value"),
            blue = $("#blue").slider("value"),
            hex = hexFromRGB(red, green, blue);
    $("#swatch").css("background-color", "#" + hex);
    $("#color").val("#" + hex);
}

我希望在更改时获取颜色输入值，然后更改背景颜色，但它不起作用：

 $(document).ready(function () {
    $("#color").change(function(){
        $("body").css("background-color", $("#color").val());
    });
})

http://jsbin.com/alefok/18/edit

Answer 1

在您的链接中：

http://jsbin.com/alefok/18/edit

HTML中有拼写错误：

<input type="text" id="colour">

但您正在使用选择器$("#color")

Answer 2

试试这个适用于你

function refreshSwatch(evt, ui) {
    var red = $("#red").slider("value"),
            green = $("#green").slider("option", "value"),
            blue = $("#blue").slider("value"),
            hex = hexFromRGB(red, green, blue);
    $("#swatch").css("background-color", "#" + hex);
    $("#color").val("#" + hex);
    $("body").css("background-color", $("#colour").val());
}

Answer 3

查看工作箱：http://jsbin.com/alefok/34/edit

改变了两件事：

此函数中的

$("#colour").val("#" + hex).change();：function refreshSwatch(){}

                       //--^^^^^^^^^-------triggered the change above here.

在这里：

$("#colour").change(function(){
     $("body").css("background", $("#colour").val());
}).change(); //<-----trigger the change here

Answer 4

当您处于回调范围内时，可以使用this来引用相关项目。这主要是一个建议，你的代码工作正常。您提供的jsbin示例中的主要问题是拼写单词“color”（或“color”）之间存在差异。

HTML

<input type="text" id="color">

JS

$(document).ready(function () {
    $("#color").change(function(){
        $("body").css("background-color", $(this).val());
    });
});

jsbin

Answer 5

尝试此修改

function hexFromRGB(r, g, b) {
        var hex = [
            r.toString( 16 ),
            g.toString( 16 ),
            b.toString( 16 )
        ];
        $.each( hex, function( nr, val ) {
            if ( val.length === 1 ) {
                hex[ nr ] = "0" + val;
            }
        });
        return hex.join( "" ).toUpperCase();
    }
    function refreshSwatch(evt, ui) {

        var red = $( "#red" ).slider( "value" ),
                green = $( "#green" ).slider( "option", "value" ),
                blue = $( "#blue" ).slider( "value" ),
                hex = hexFromRGB( red, green, blue );

        $( "body" ).css( "background-color", "#" + hex );   //Here give body not div
        $("#colour").val("#" + hex);
    }
    $(function() {
        $( "#red, #green, #blue" ).slider({
            orientation: "horizontal",
            range: "min",
            max: 255,
            value: 127,
            slide: refreshSwatch,
            change: refreshSwatch
        });
        $( "#red" ).slider( "value", 255 );
        $( "#green" ).slider( "value", 140 );
        $( "#blue" ).slider( "value", 60 );
    });
});

在变化时获得输入文本的值

5 个答案:

查看工作箱：http://jsbin.com/alefok/34/edit