クリック後に画像で表示させたいので、ご教授お願いします。
http://kittoo.net/omikujisite/
上記URLでおみくじクリックして結果がテキストで表示されるのですが、テキストではなく画像で表示させたい。
画像は「大吉」、「中吉」等画像で20種類ぐらい作成します。
参照URLのようにデフォルトはおみくじ画像のみで、クリック後（アニメーション後）に結果の画像（大吉、中吉等20種類のなかから1つランダムで）を表示させたいのです。
以下のスプリクトをどのように修正すればいいのか教えていただけますでしょうか？
http://kittoo.net/omikujisite/js/omikuji.js
HTMLは以下
<table id="result">
<thead>
<tr>
<th class="no">第<span></span>番</th>
<th class="result"></th>
</tr>
</thead>
</table>
No.2
4973
2154
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 に差し込んでいます。
画像の大きさによっては、スタイルシートで大きさを調整する必要があります。
画像のファイル名を通し番号にしたりとかすると、もっと短く書けるような気もしますが、元のソースを活かしてあります。
追加したところには、コメントで「★」を入れてあります。
元のソースの文字列の部分は、（必要ないけど）残してありますので、動作を確認したら消しちゃってください。
No.2
49732154
ここでベストアンサー
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 に差し込んでいます。
画像の大きさによっては、スタイルシートで大きさを調整する必要があります。
画像のファイル名を通し番号にしたりとかすると、もっと短く書けるような気もしますが、元のソースを活かしてあります。
追加したところには、コメントで「★」を入れてあります。
元のソースの文字列の部分は、（必要ないけど）残してありますので、動作を確認したら消しちゃってください。
そういったことも踏まえて、ぼくならこう書くと思います。
7
6
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 を全て渡して、その結果を確認してみる。
＃ 蛇足でした :-)
新設丁寧にアドバイス有難うございます。
勉強になりました。
1
2
そういったことも踏まえて、ぼくならこう書くと思います。
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/23 21:28:01＃ 蛇足でした :-)
新設丁寧にアドバイス有難うございます。
2016/12/26 11:58:11勉強になりました。