javascript - 为按钮使用十六进制值并通过 onClick() 将其传递给函数

Question

我应该创建 45 个色样。我希望能够使用颜色样本的十六进制值以及通过 onClick 事件将十六进制值传递给函数。怎么办？

下面是我的代码。

<input class="colBtn c1" id="cp1" type="button" onclick="colChg('#FF6600')" />

function colChg(val) {
  <!-- do something... -->
}

CSS

.colBtn {
    border: 0.5px outset #000;
    height:15px;
    width:15px;
    cursor:pointer;
    float:center;
}
.c1{
    background-color: #000000;
}

我希望能够做这样的事情:

colVal = array (#ffffff, #cccccc, #ff6600....)
for(i=1;i<45;i++){
<input class="colBtn" id="cp"+i  background-color: colVal[i] type="button" onclick="colChg('colVal[i]')" />
}

Answer 1

遍历颜色数组:

colVal = ["#ffffff", "#cccccc", "#ff6600"];
for(var i = 0; i < colVal.length; i++) {
    $("body").append('<button class="colors" style="background-color:' + colVal[i] + ';">click!</button>');
}

点击颜色:

$(".colors").click(function() {
    var thisColor = $(this).css("background-color");
    alert(thisColor);
});

注意:.css("color"); 可能返回 RGB 值。 (参见此处:RGB to Hex and Hex to RGB)

演示:http://jsfiddle.net/5Q2Wq/2/

---

更新: 无需转换即可将颜色作为 HEX 值的小技巧:

var thisColorHex = $(this).attr("style").substring($(this).attr("style").indexOf("background-color:") + 17, $(this).attr("style").indexOf(";", $(this).attr("style").indexOf("background-color:"))).trim();

演示:http://jsfiddle.net/5Q2Wq/4/