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

你可以按照自己的方式去做，但我可能会这样做：

var colVal = [ 'color1', 'color2', 'color3'], //etc..
    HTMLinsert = ""

colVal.forEach( function( color ) {

     HTMLinsert += '<input class="colBtn c1" id="cp1" type="button" id="' + color +'" />';

});

document.getElementById('insertArea').innerHTML = HTMLinsert;

然后在你的处理函数中：

function colChg(event) {

     color = event.target.id; //this will give you the color

Answer 2

遍历colors数组：

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/

使用十六进制值作为按钮并通过onClick（）将其传递给函数

2 个答案: