0

テーブルに小さな画像を表示するこのコードがあります

<table>
<tr>
<td class='change' id='c1'><img src='images/on.gif'/></td>
<td class='change' id='c2'><img src='images/on.gif'/></td>
<td class='change' id='c3'><img src='images/on.gif'/></td>
<td class='change' id='c4'><img src='images/on.gif'/></td>
<td></td>    
</tr>
</table>

クリックイベントでテーブル内の画像のいずれかの画像を変更するにはどうすればよいですか? 私はこれをやろうとしましたが、うまくいかないようです。

$(document).on('click', '.change', function() {
if (this.src == 'images/on.gif')
  this.src = 'images/off.gif';
else
  this.src = 'images/on.gif';
});

私はこれを検索しましたが、同様の質問を見つけましたが、実際には機能していないようです。

4

2 に答える 2

2

.changeは画像ではなく、親の TD です:

$(function() {
    $(document).on('click', '.change', function () {
        var img = $(this).find('img');
        img.attr('src', (img.attr('src') == 'images/on.gif' ? 'images/off.gif' : 'images/on.gif'));
    });
});
于 2013-02-17T15:58:17.670 に答える
2

.change画像要素ではなく、表のセル要素です

$(document).on('click', '.change img', function () {
于 2013-02-17T15:58:26.320 に答える