Question

我有一个带十六进制值的数组。我希望能够创建颜色样本，并能够通过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;
}

Answer 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。

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

1 个答案: