1

概述：我正在 html 中制作 9*9 表，在其中我将填充不同的图像（字母，即“A”或“B”）我想要的是这样一种方式，即当用户单击图像然后相应的字符在其下方的文本框中输入。

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

4

3 回答 3

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 事件纯粹是在 img 选择器上，它会在点击页面上的任何图像时触发。

JS

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

});

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

编辑： 按照布兰登的建议更新

于 2013-06-08T19:22:44.603 回答
1

You can use event delegation to make this very clean. Personally I would just use the alt attribute of my images and not bother with data attributes or IDs. The relevant part is here:

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

But you can find a working, randomly generated version (minus image sources) here: http://jsfiddle.net/K79FQ/

于 2013-06-08T19:40:13.750 回答
0

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

我正在使用事件委托，并假设图像被设置为单元格的背景。我只为第一行完成了这个，当 css 应用于表格时，nbsp 将不是必需的。

<!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>
于 2013-06-08T19:48:04.670 回答