JQuery для изменения значения объекта

Question

Как использовать jQuery для изменения значения объекта. У меня есть объект, и я знаю селектор, но как изменить значение RGB на клик? Я пытаюсь изменить penColor. В четырех элементах списка есть цвета данных (желтый, зеленый, синий, оранжевый). Итак, когда пользователь нажимает на желтый, объект js меняет значение объекта?

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

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

А вот разметка:

<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

Вы можете изменить .penColor свойство signaturepad во время выполнения (API-интерфейс поддерживает это). Для того, чтобы перевести шестигранник в RGB() вы должны использовать ответ, связанный здесь другим человеком, а

hexToRgb адаптировано из: 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; 
} 

Таким образом, используя это и присвоение имущества по щелчку заканчивает тем, например:

$('.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 
}); 

Answer 2

Если вы хотите изменить цвет penColor, то вы должны выставить метод в SignaturePad классе что-то вроде этого

SignaturePad.prototype.setColor(color) { 
    this.penColor = color; // Depends on how you have stored penColor internally 
} 

И вызовите этот метод из обработчика кликов.

$('.global-color li').click(function(e) { 
    var color = e.target.getAttribute('data-color'); 
    signaturePad.setColor(color); 
}); 

Answer 3

Попробуйте

$('ul.global-color li').click(function(event){ 
    // Change color here 
    var color = $(this).data('color'); 
    signaturePad.penColor = hexToRGB(color); 
} 

Для яваскрипта Hex к функции RGB Я хотел бы проверить RGB to Hex and Hex to RGB

Как уже упоминалось выше, вы не можете изменить свойство signaturePad, если не существует способ сделать так.