前回。
昨日に比べると軽いコードです。
クリックするたびにテーブル上の文字を切り替えるだけです。
一応、ついでに背景とかtitleとかも替えてますが、パターンの判定は単純なswitch文です。
クリックするたびに文字を切り替える
デモ
| グー | チョキ | パー |
| グー | チョキ | パー |
コード
$('#tableのid').find('td').click(function() {
var txt;
var color;
switch($(this).text()) {
case 'グー':
txt = 'チョキ';
color = '#9f9';
break;
case 'チョキ':
txt = 'パー';
color = '#f99';
break;
case 'パー':
txt = 'グー';
color = '#99f';
break;
}
$(this).text(txt);
$(this).attr('title', txt);
$(this).css('background-color', color);
});
$.children()だと孫要素を追うのが面倒なようなので$.find()を使ってます。
<td>タグそのものをthisで参照していても、$.text()は<td>内の文字まで辿れるのがナイスですね。<span>タグとかあると更に子要素を見ないと駄目かもですが。
