jquery改变对象的值答案

【问题标题】：Jquery to change the value of an objectjquery改变对象的值
【发布时间】：2014-02-06 00:46:13
【问题描述】：

您将如何使用 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>

【问题讨论】：

你不能改变已经传递给SignaturePad类的对象，除非有一个内置的方法可以这样做，

标签： javascript jquery signaturepad

【解决方案1】：

jsFiddle Demo

您可以在运行时更改signaturepad 的.penColor 属性（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
});

【讨论】：

【解决方案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);
});

【讨论】：

【解决方案3】：

试试这个

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

对于 javascript Hex 到 RGB 函数，我会查看 RGB to Hex and Hex to RGB

如上所述，您不能更改 signaturePad 的属性，除非有方法可以这样做。

【讨论】：