通过单击不同的图像来更改文本区域的值的 JavaScript 代码

Question

概述:我正在用 html 制作 9*9 表格，我将在其中填充不同的图像(字母，即“A”或“B”)，我想要的是让用户点击图像然后在其下方的文本框中输入相应的字符。

例如用户单击“A”的图像，然后“A”将成为文本框的条目，下一个用户单击“Z”，那么新条目将是“AZ”(显然没有单引号 ;-))。 谁能帮我解决给定 JavaScript 代码的任何示例。

Answer 1

您可以使用事件委托(delegate)使它变得非常干净。就我个人而言，我只会使用我的图像的 alt 属性，而不用担心数据属性或 ID。相关部分在这里:

$(tableElement).on('click', 'img', function(event) {
    var target = event.target;
    label.innerText = label.innerText + target.alt;
});

但您可以在此处找到一个随机生成的有效版本(不含图像源):http://jsfiddle.net/K79FQ/