用于创建按钮并将其十六进制值传递给函数的十六进制值数组答案

【问题标题】：Array of hex values to create buttons and pass it's hex values to a function用于创建按钮并将其十六进制值传递给函数的十六进制值数组
【发布时间】：2014-07-29 14:57:07
【问题描述】：

我有一个包含十六进制值的数组。我希望能够创建颜色样本并能够将十六进制值传递给具有 onClick 事件的函数。

这是我的代码。但它不起作用（甚至颜色样本都没有显示）。

<script>
colVal = ["#454545", "#cccccc", "#ff6600"];
for(var i = 0; i < colVal.length; i++) {
    $("body").append('<input class="colBtn" id="cp"+i type="button" style="background-color:' + colVal[i] + ';  onclick="colChg(' + colVal[i] + ')"/>');
}

function colChg(cVal) {
    //doSomething
}
</script>

css

.colBtn {
    border: 0.5px outset #000;
    height:25px;
    width:75px;
    cursor:pointer;
    float:center;
}

【问题讨论】：

标签： javascript php jquery html css

【解决方案1】：

有三个原因不起作用（但见下文；您使用的是 jQuery，因此不需要使用onClick 属性）：

... id="cp"+i type=... 会将+i 放入您的 HTML 中。你的意思是... id="cp' + i + '" type=...（但你真的需要id吗？）。
...onclick="colChg(' + colVal[i] + ')... 未能在 JavaScript 中的颜色值周围加上引号，导致语法错误。这会将引号放入：...onclick="colChg(\'' + colVal[i] + '\')...
您在 style 属性上缺少结束 HTML 引号，因此 onClick 不会被注意到。 ... + colVal[i] + '; onclick=... 应该是 ... + colVal[i] + ';" onclick=...（你不需要那里的 ;）。

Working copy with the edits above:

var colVal = ["#454545", "#cccccc", "#ff6600"];
for(var i = 0; i < colVal.length; i++) {
  $("body").append('<input class="colBtn" id="cp' + i + '" type="button" style="background-color:' + colVal[i] + '"  onclick="colChg(\'' + colVal[i] + '\')"/>');
}

function colChg(cVal) {
  // do something
}

但是当您使用 jQuery 时，您可以更简洁地执行此操作，并且（更重要的是）无需所有繁琐的引号：Live Copy

$.each(["#454545", "#cccccc", "#ff6600"], function(i, color) {
  $('<input class="colBtn" type="button">')
    .attr("id", "cp" + i)           // (If you need it)
    .css("background-color", color)
    .click($.proxy(colChg, null, color))
    .appendTo(document.body);
});

function colChg(cVal) {
  // Do something
}

（$.proxy 调用创建了一个函数，当调用该函数时，将调用 colChg，没有特定的 this 值和颜色。）

旁注：您的代码成为The Horror of Implicit Globals 的牺牲品，因为您从未声明您的colVal 变量。在它前面添加一个var。

【讨论】：