Помогите написать функцию, на jQuery
Помогите написать функцию, на jQuery, что бы при нажатии на кнопку color изменялся цвет текста в "swatch" , при нажатии на Background обратно изменялся цвет фона, кто то знает как ?
function hexFromRGB(r, g, b) {
let 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() {
let red = $("#red").slider("value"),
green = $("#green").slider("value"),
blue = $("#blue").slider("value"),
hex = hexFromRGB(red, green, blue);
$("#swatch").css("background-color", "#" + 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);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="wrapper">
<button>Color</button>
<button>Background</button>
</div>
<div id="red"></div>
<div id="green"></div>
<div id="blue"></div>
<div id="swatch" class="ui-widget-content ui-corner-all">
<p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>