読者です 読者をやめる 読者になる 読者になる

jQueryで遊んでみましたの3

javascript jquery

前回

昨日に比べると軽いコードです。

クリックするたびにテーブル上の文字を切り替えるだけです。

一応、ついでに背景とか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>タグとかあると更に子要素を見ないと駄目かもですが。