3

このコードにはjquerycolorpickerがあり、onchangeinput#colorは入力値を16進数で表示します。変更時に色の値を取得するにはどうすればよいですか？

<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

作業ビンを参照してください：http：//jsbin.com/alefok/34/edit

2つの変更：

$("#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 に答える
1

あなたのリンクで：

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

HTMLにタイプミスがあります。

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

しかし、あなたはセレクターを使用しています$("#color")

于 2013-02-16T13:23:54.047 に答える
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 に答える
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 に答える