3

我有这个带有 jquery colorpicker 的代码，onchange input #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

4

5 回答 5

1

试试这个它对你有用

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());
}
于 2013-02-16T13:27:04.347 回答
1

在您的链接中：

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

您的 HTML 中有错字：

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

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

于 2013-02-16T13:23:54.047 回答
1

查看工作箱：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
于 2013-02-16T13:55:26.327 回答
0

当您在回调范围内时，您可以使用this来引用有问题的项目。这主要是一个建议，你的代码工作得很好。您提供的jsbin示例中的主要问题是“颜色”（或“颜色”）这个词的拼写方式存在差异。

HTML

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

JS

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

jsbin

于 2013-02-16T13:20:26.073 回答
0

试试这个编辑

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 );
    });
});
于 2013-02-16T13:21:02.763 回答