• はてなアカウントでログイン
• 無料ユーザー登録

ベストアンサー

• a-kuma32016/12/23 13:19:23

  満足180pt

  こんな感じ。

  $(function() {
      $("#getFortune").click(function() {
          /* 0から100の範囲 */
          var result = Math.floor( Math.random() * 100 );
          var com =['大吉','中吉','小吉','吉','半吉','末吉','末小吉','凶','小凶','半凶','末凶','大凶'];
          // ★画像の URL
          var com_img = [
              'result_dai_kichi.jpg',     // 大吉
              'result_chu_kichi.jpg',     // 中吉
              'result_sho_kichi.jpg',     // 小吉
              'result_kichi.jpg',         // 吉
              'result_han_kichi.jpg',     // 半吉
              'result_sue_kichi.jpg',     // 末吉
              'result_suesho_kichi.jpg',  // 末小吉
              'result_kyo.jpg',           // 凶
              'result_sho_kyo.jpg',       // 小凶
              'result_han_kyo.jpg',       // 半凶
              'result_sue_kyo.jpg',       // 末凶
              'result_dai_kyo.jpg',       // 大凶
          ];
          
          var omikuji;
          var omikuji_img;    // ★
  
          if( result <= 18 ) {//0以上18未満//大吉
              omikuji = com[0];
              omikuji_img = com_img[0];   // ★
          } else if( 18 < result && result < 33 ) {//18以上33未満//中吉
              omikuji = com[1];
              omikuji_img = com_img[1];   // ★
          } else if( 33 < result && result < 48 ) {//33以上48未満//小吉
              omikuji = com[2];
              omikuji_img = com_img[2];   // ★
          } else if( 48 < result && result < 58 ) {//48以上58未満//吉
              omikuji = com[3];
              omikuji_img = com_img[3];   // ★
          } else if( 58 < result && result < 68 ) {//58以上68未満//半吉
              omikuji = com[4];
              omikuji_img = com_img[4];   // ★
          } else if( 68 < result && result < 76 ) {//68以上76未満//末吉
              omikuji = com[5];
              omikuji_img = com_img[5];   // ★
          } else if( 76 < result && result < 84 ) {//76以上84未満//末小吉
              omikuji = com[6];
              omikuji_img = com_img[6];   // ★
          } else if( 76 < result && result < 90 ) {//84以上90未満//凶
              omikuji = com[7];
              omikuji_img = com_img[7];   // ★
          } else if( 90 < result && result < 94 ) {//90以上94未満//小凶
              omikuji = com[8];
              omikuji_img = com_img[8];   // ★
          } else if( 94 < result && result < 97 ) {//94以上97未満//半凶
              omikuji = com[9];
              omikuji_img = com_img[9];   // ★
          } else if( 97 < result && result < 99 ) {//97以上99未満//末凶
              omikuji = com[10];
              omikuji_img = com_img[10];  // ★
          } else {//99以上100//大凶
              omikuji = com[11];
              omikuji_img = com_img[11];  // ★
          }
          
          
          $("#getFortune").addClass('after').fadeOut(2000);
          $("#result").delay(2000).fadeIn(2000);
          $("#result tr .no span").text(result);
  //      $("#result tr .result").text(omikuji);
          $("#result tr .result").html('<img src="' + omikuji_img + '">');    // ★
  
  
      });
  });
  

  用意する画像をそのまま HTML に差し込んでいます。
  画像の大きさによっては、スタイルシートで大きさを調整する必要があります。
  
  画像のファイル名を通し番号にしたりとかすると、もっと短く書けるような気もしますが、元のソースを活かしてあります。
  追加したところには、コメントで「★」を入れてあります。
  元のソースの文字列の部分は、（必要ないけど）残してありますので、動作を確認したら消しちゃってください。

  スター

  • 

    4件のコメントを見る

  • ねったろう 2016/12/23 14:04:50

    考えていたとおりにできました。
    ご教授いただきありがとうございました。

    スター

  • a-kuma3 2016/12/23 20:48:52

    このコードのまま使うのでしょうか。
    三つほど間違いがあります。

            if( result <= 18 ) {//0以上18未満//大吉
    

    これだと、18以下ですね。
    
    

            } else if( 18 < result && result < 33 ) {//18以上33未満//中吉
                ...
            } else if( 33 < result && result < 48 ) {//33以上48未満//小吉
    

    33 が判定に入らず、最後の else（「大凶」）になります。
    これ以降の else if の最初の条件は <= ですよね。
    
    

            } else if( 76 < result && result < 84 ) {//76以上84未満//末小吉
                ...
            } else if( 76 < result && result < 90 ) {//84以上90未満//凶
    

    タイプミス。76 → 84 。

    スター

  • a-kuma3 2016/12/23 21:28:01

    そういったことも踏まえて、ぼくならこう書くと思います。

        function get_display_data(num) {
            var data = [
                [ 18  , '大吉'   , '/result_dai_kichi.jpg',    ],
                [ 33  , '中吉'   , '/result_chu_kichi.jpg',    ],
                [ 48  , '小吉'   , '/result_sho_kichi.jpg',    ],
                [ 58  , '吉'     , '/result_kichi.jpg',        ],
                [ 68  , '半吉'   , '/result_han_kichi.jpg',    ],
                [ 76  , '末吉'   , '/result_sue_kichi.jpg',    ],
                [ 76  , '末小吉' , '/result_suesho_kichi.jpg', ],
                [ 90  , '凶'     , '/result_kyo.jpg',          ],
                [ 94  , '小凶'   , '/result_sho_kyo.jpg',      ],
                [ 97  , '半凶'   , '/result_han_kyo.jpg',      ],
                [ 99  , '末凶'   , '/result_sue_kyo.jpg',      ],
                [ 999 , '大凶'   , '/result_dai_kyo.jpg',      ],
            ];
    
            for (i = 0 ; i < data.length ; ++i) {
                if (num < data[i][0]) {
                    return data[i];
                }
            }
    
            // ここには来ないはず
            alert("ERROR !!!");
            return null;
        }
    
    
        /* 0から100の範囲 */
        var result = Math.floor( Math.random() * 100 );
        
        var data = get_display_data(result);
    
        var omikuji = data[1];
        var omikuji_img = data[2];
    
        ...
    

    書き方はいろいろとありますが、意識していることは

    • データを配列で持つこと
    • 関数にすること

    です。
    
    データを配列で持つことによって、判定の境界値を間違うこと（以下と未満の取り違えとか）はあっても、歯抜けになるようなミスは起こりえません。
    
    関数にすることのメリットは、テストができることです。
    例えば、

        // test
        for (ii = 0 ; ii < 100 ; ++ii) {
            console.log(ii, get_display_data(ii));
        }
    

    こんな感じで、乱数で発生させる 0 から 99 を全て渡して、その結果を確認してみる。
    
    ＃ 蛇足でした　:-)

    スター

  • ねったろう 2016/12/26 11:58:11

    新設丁寧にアドバイス有難うございます。
    勉強になりました。

    スター

その他の回答

• rsc2016/12/23 10:57:07

  満足20pt

  　こちらは参考になるでしょうか。
  ●イヌでもわかるJavaScript講座 - おみくじ その2
  ●JavaScriptでおみくじ

  スター

  • 

    1件のコメントを見る

  • ねったろう 2016/12/23 11:29:16

    参考URLありがとうございます。
    
    初期画面はおみくじ画像のみで、
    
    おみくじクリック（アニメーション後）に結果を表示したいのです。。

    スター

• ねったろう

  2016/12/23 11:30:47

  初期画面は　おみくじ画面のみで　クリック後に　結果を表示させたいのです。

• ねったろう

  2016/12/23 11:39:27

  質問文を編集しました。詳細はこちら。

この質問へのコメント

質問の情報

登録日時

2016-12-23 10:24:52

終了日時

2016-12-23 14:06:57

回答条件

1人1回まで

この質問のカテゴリ

• ウェブ制作

この質問に含まれるキーワード

人気の質問

• 知らない人に突然話しかけられたらどうすれば良いですか？ 僕は高二の男です。今日祭りで友達を待っていた…匿名質問者6時間前
• Roblox Robux Generator https://www.linkedin.com/pulse/10000-free-robux-roblox-generator-unlimited-da…匿名質問者1日前
• マンガ展のリアルサイン会について マンガ展にて、とある漫画家さんのリアルサイン会イベントに当選させて…匿名質問者21日前
• Sssdsdda sasdasdadssads saddsaasd saddsa匿名質問者1日前
• 「この太ももってそんなに女の子の太ももに見えますか？ 前体育の着替え中にたまたま友達に…匿名質問者1日前

メニュー

• 質問一覧
• カテゴリ一覧
• 無料ユーザー登録
• 人力検索はてなトップ

PC版

• お問い合わせ
• ヘルプ
• お知らせ
• はてなトップ