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 を追加しました。コンテナーがなく、クリック イベントが純粋に 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

イベント委任を使用して、これを非常にきれいにすることができます。個人的には、画像の alt 属性を使用するだけで、データ属性や ID は気にしません。関連する部分は次のとおりです。

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

ただし、動作するランダムに生成されたバージョン (イメージ ソースを除く) は、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 に答える