如何使用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>
答案 0 :(得分:1)
<强> jsFiddle Demo
强>
您可以在运行时更改.penColor
的{{1}}属性(API支持此功能)。为了将十六进制翻译成rgb(),你应该使用另一个人在这里链接的答案
hexToRgb改编自:https://stackoverflow.com/a/5624139/1026459
signaturepad
所以使用它并在点击时分配属性最终看起来像这样:
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;
}
答案 1 :(得分:0)
如果你想改变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);
});
答案 2 :(得分:0)
试试这个
$('ul.global-color li').click(function(event){
// Change color here
var color = $(this).data('color');
signaturePad.penColor = hexToRGB(color);
}
对于javascript Hex to RGB功能,我会查看RGB to Hex and Hex to RGB
如上所述,除非有方法,否则无法更改signaturePad的属性。