概述:我正在 html 中制作 9*9 表,在其中我将填充不同的图像(字母,即“A”或“B”)我想要的是这样一种方式,即当用户单击图像然后相应的字符在其下方的文本框中输入。
例如用户点击“A”的图像然后“A”将成为文本框的条目下一个用户点击“Z”然后新条目将是“AZ”(没有单引号;-)显然)。任何人都可以帮助我提供给定 JavaScript 代码的任何示例。
概述:我正在 html 中制作 9*9 表,在其中我将填充不同的图像(字母,即“A”或“B”)我想要的是这样一种方式,即当用户单击图像然后相应的字符在其下方的文本框中输入。
例如用户点击“A”的图像然后“A”将成为文本框的条目下一个用户点击“Z”然后新条目将是“AZ”(没有单引号;-)显然)。任何人都可以帮助我提供给定 JavaScript 代码的任何示例。
如果您使用的是 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);
});
有很多方法可以做同样的事情。我最喜欢这种方法。
编辑: 按照布兰登的建议更新
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/
(为什么每个人都假设 jQuery?)
我正在使用事件委托,并假设图像被设置为单元格的背景。我只为第一行完成了这个,当 css 应用于表格时,nbsp 将不是必需的。
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<table id="tblLetters">
<tr><td data-lett="A"> </td><td data-lett="B"> </td><td data-lett="C"> </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>