Question

如何在输入中获取红色，绿色，蓝色的颜色选择器值？
http://jsbin.com/alefok/1/edit

<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="colour">
<script>
  $(".ui-slider-handle").on('change', function(){
var valA = $("#red").slider("value");
var valB = $("#green").slider("value");
var valC = $("#blue").slider("value");
$("#colour").append(valA+","+ valB+","+ valC)
})
</script>
</body>

Answer 1

尝试更改您的事件绑定，如下所示：JSBin

<script>
      $("#red, #green, #blue").on('slidestop', function(){
        var valA = $("#red").slider("value");
        var valB = $("#green").slider("value");
        var valC = $("#blue").slider("value");
        $("#colour").val(valA+","+ valB+","+ valC)
        })
    </script>

Answer 2

在refreshSwatch函数上设置它，当slide被更新时，该函数将触发jQuery UI滑块的change和background-color事件。

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);
    $("#colour").val("#" + hex);
}

使用这些事件可以让您执行实时更新。您可以调整设置为文本输入的值的格式。

See it here.

Answer 3

你需要获得swach的BG：

$('#red, #blue, #green').change(function(){

    $('#swatch').css('background-color');

});

如何获得colorpicker值？

3 个答案: