カードをシャッフルして、その中から1枚めくるとそのカードの説明文が出るようにしたいのですが
めくったカードを表示したまま、その下に説明が表示されるようにしたいのですが
この書き方では当たり前だとは思いますが、カードが消えて文字が表示されてしまいます。
しかし、何を書いたら出来るのか全く分からず困っています。
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title></title> <link href="card.css" type="text/css" rel="stylesheet" media="all"> </head> <body> //カードが閉じる function cardClose(){ $("#card li:eq("+index+")").stop().animate({ left: "75"}, 500); $("#card li:eq("+index+") img").stop().animate({ width: "0",height: "200px"}, 500, cardOpen); } //カードが開く function cardOpen(){ $("#card li:eq("+index+") img").attr("src","image/card"+(index+1)+".jpg"); $("#card li:eq("+index+") img").stop().animate({ width: "150px",height: "200px"}, 500); $("#card li:eq("+index+")").stop().animate({ left: "0"}, 500, message); } //テキスト表示 function message(){ var msg = new Array(5) msg[0] = 'テキストA' msg[1] = 'テキストB' msg[2] = 'テキストC' msg[3] = 'テキストD' msg[4] = 'テキストE' document.write(msg[index]); } $(function(){ for(i=0; i<4; i++) { kakudo.push(Math.round(Math.random () * 360 + 0.5)); } timer = setInterval(function(){ kaiten(); },40); $("#card li").click(function(){ index = $("#card li").index(this); //選択したカードの順番をindexに保存 $("#card li:not(:eq("+index+"))").animate({ opacity: "0"}, 1000); //選択したカード以外の透明度を0に clearInterval(timer); //kaiten()の動きを止める $("#card li:eq("+index+")").rotate({ animateTo: 0}); //選択したカードの角度を0°まで回す $("#card li:eq("+index+")").animate({ top: "-180",left: "0"}, 1000, cardClose); //選択したカードを一番初めの位置に戻した後cardClose()を実行 }); }); </script> </body> </html>
ここに何か足したら良いんだろうとは思うのですが…
//テキスト表示 function message(){ var msg = new Array(5) msg[0] = 'テキストA' msg[1] = 'テキストB' msg[2] = 'テキストC' msg[3] = 'テキストD' msg[4] = 'テキストE' document.write(msg[index]); }
それと、カードの順番をindexに配列させているのですが
カード枚数が増えると、カードが重なっていくので番号の後ろの方しかめくることが出来ないので、いindexをランダムにしたくてMath.floor( Math.random() *5 ) ;を入れたりしているのですが(今は書いてないですが)上手くいきません。
カードの絵と説明文は一致させたいのです。
カードA=説明Aのような…。
どうしたら良いのでしょうか。
よろしくお願いします。
*自分のやりたいことが、JavaよりもJavascriptの方が良いとなりました(-_-;)
すみません…。でもJavaも引き続き勉強中です。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/01/21 11:36