Question

概述：我正在用html制作9 * 9表格，在其中我将填写不同的图像（字母表，即“A”或“B”），我想要的是使其成为用户点击图像的方式在其下方的文本框中输入相应的字符。

例如用户点击'A'的图像然后'A'将是文本框的输入下一个用户点击'Z'然后新条目将是'AZ'（没有单引号;-)显然）。任何人都可以帮助我解决给定JavaScript代码的任何示例。

Answer 1

如果您使用的是jquery，则可以执行以下操作。

<input id='textbox' type='text' />

<div id='container'>
    <img src="a.png" id="A" data-char='A'/>
    <img src="b.png" id="B" data-char='B'/>
    <img src="c.png" id="C" data-char='C'/>
</div>

我添加了一个容器div，以使click事件略微具体化。如果没有容器且click事件纯粹是在img选择器上，那么点击页面上的任何图像都会触发。

JS

$('#container').on('click', 'img', function (e) {
     var char = $(this).attr('data-char');
     var textboxValue = $('#textbox').val();
     $('#textbox').val(textboxValue + char);

});

有很多方法可以做同样的事情。我最喜欢这种方法。

修改根据Brandon的建议更新

Answer 2

您可以使用事件委派来使其非常干净。就个人而言，我只会使用我的图像的alt属性，而不是打扰数据属性或ID。相关部分在这里：

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

但是你可以在这里找到一个有效的随机生成版本（减去图片来源）：http://jsfiddle.net/K79FQ/

Answer 3

（为什么每个人都假设jQuery？）

我正在使用事件委托，并假设图像被设置为单元格的背景。我只在第一行完成了此操作，并且当css应用于表格时没有必要。

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
<table id="tblLetters">
    <tr><td data-lett="A">&nbsp;</td><td data-lett="B">&nbsp;</td><td data-lett="C">&nbsp;</td></tr>
    <tr><td>D</td><td>E</td><td>F</td></tr>
    <tr><td>G</td><td>H</td><td>I</td></tr>
</table>
<input type="text" id="results">


<script type="text/javascript">
var addEvent = function (elem, eventType, func) {
    if ( elem.addEventListener )
        addEvent = function (elem, eventType, func) {
            elem.addEventListener(eventType, func, false);
        };
    else if ( elem.attachEvent )
        addEvent = function (elem, eventType, func) {
            elem.attachEvent('on' + eventType, func);
        };
    addEvent(elem, eventType, func);
};

var delegateEvent = function (elem, childElems, eventType, func) {
    addEvent(elem, eventType, function (e) {
        var evt = e || window.event;
        var elem = evt.target || evt.srcElement;
        if ( elem.nodeName.toLowerCase() == childElems ) {
            func(elem);
        }
    });
};
function updateResults(cell) {
    document.getElementById('results').value += cell.getAttribute('data-lett');
}
delegateEvent(document.getElementById('tblLetters'), 'td', 'click', updateResults);
</script>
</body>
</html>

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

3 个答案: