Jquery to change the value of an object

Question

How would you use jQuery to change the value of an object. I have the object and I know the selector, but how would I change the RGB value on click? I'm trying to change the penColor. There are data colors on four list items (yellow, green, blue, orange). So when the user clicks on yellow, the js object changes the object value?

var signaturePad = new SignaturePad(canvas, {
    minWidth: 2,
    maxWidth: 5,
    penColor: "rgb(66, 133, 244)"
});

var selectedColor = $(e.currentTarget).data('color');
$('.initial').css('color', selectedColor);

And here's the markup:

<ul class="global-color">
  <li class="yellow-pick" data-color="#f8c90d"></li>
  <li class="green-pick" data-color="#3dae49"></li>
  <li class="orange-pick" data-color="#e87425"></li>
  <li class="blue-pick" data-color="#009cc5"></li>
</ul>

Answer 1

jsFiddle Demo

You can change the .penColor property of signaturepad during runtime (the API supports this). In order to translate the hex into rgb() you should use the answer linked here by another person as well

hexToRgb adapted from: https://stackoverflow.com/a/5624139/1026459

function hexToRgb(hex) {
 var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
 return result ? "rgb("+parseInt(result[1], 16)+
    ","+parseInt(result[2], 16)+
    ","+parseInt(result[3], 16)+")"
  : null;
}

So using this and assigning the property on click ends up looking like this:

$('.global-color li').click(function(){
 $('.on').removeClass('on');//demo highlighting only
 var $t = $(this);
 $t.addClass('on');//demo highlighting only
 var selectedColor = $t.data('color');//read data
 signaturePad.penColor = hexToRgb(selectedColor);//assign to pen color
});