如何在红色、绿色、蓝色的颜色变化时获得输入中的颜色选择器值？
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>
尝试如下更改您的事件绑定：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>
将其设置在refreshSwatch将在更新时触发jQuery UI 滑块的slide和事件的功能上。changebackground-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);
}
使用这些事件可以让您执行实时更新。您可以调整设置为文本输入的值的格式。
您需要获取 swach 的 BG：
$('#red, #blue, #green').change(function(){
$('#swatch').css('background-color');
});