jQueryを使って神経衰弱を作りたい

###前提・実現したいこと
16枚の配置されたカードを「？」で表示し、クリックするとランダムで数字が表示される。

※for文を使って <li>を変数に文字列でくっつけて、<li> 自体の中身は「？」。
data属性に配列の値を入れたいです。for文の中ではなく、外でappendしたいです。

###発生している問題・エラーメッセージ
<ul>内に<li>でカードを作り配置していますが、<li>の外にも数字の羅列が表示されてしまいます。
さらにカードをクリックすると全て同じ数字が表示されてしまいます。

###該当のソースコード

html
1<!doctype html>
2<html>
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6<meta name="format-detection" content="telephone=no">
7<title></title>
8<link rel="stylesheet" href="css/reset.css">
9<link rel="stylesheet" href="css/base.css">
10<link rel="stylesheet" href="css/style.css">
11</head>
12<body>
13<ul class="lists clearfix"></ul>
14<script type="text/javascript" src="js/jquery.js"></script>
15<script type="text/javascript">
16//ここにjQueryが入ります
17</script>
18</body>
19</html>
20

css
1.lists {
2    border: 10px #CCC solid;
3}
4.lists > li {
5    float: left;
6    width: 25%;
7    background-color: #EEE;
8    border-top: 2px #CCC solid;
9    border-right: 2px #CCC solid;
10    font-size: 20px;
11    font-weight: bold;
12    line-height: 75px;
13    text-align: center;
14    cursor: pointer;
15    -webkit-box-sizing: border-box;
16    box-sizing: border-box;
17}
18.lists > li:nth-child(-n + 4) {
19    border-top: none;
20}
21.lists > li:nth-child(4n) {
22    border-right: none;
23}

javascript
1$(function(){
2  var $ul = $(".lists"),
3      totalCard = 15, //カード枚数
4      array = []; //カード配列
5  //     returnSec = 1000, //めくったカードが戻る秒数
6  //     index; //クリックしたカードの並び順
7  //     first = true, //クリックしたカードが1枚目かどうかの判定
8  //     card1,  //1枚目に引いたカードの番号
9  //     card2,  //2枚目に引いたカードの番号
10  //     pair = 0; //正解したカードのペア数
11  
12  //カード番号を配列に格納
13  for (i = 0; i <= totalCard/2; i++){
14    array.push(i,i);
15  }
16  //配列の中身をランダムに並び替える
17  array.sort(function(){
18    return Math.random() - Math.random();
19  });
20  //カードを追加
21  for (i = 0; i <= totalCard; i++){
22    array.push("<li data-num='array[i]'>" + '?' + "</li>");
23  }
24  $ul.append(array);
25  // カードめくり
26  $('li').click(function(){
27    $(this).text(i);
28  });
29});

###補足情報(言語/FW/ツール等のバージョンなど)
初心者のため仕組みを理解しきれておらず、考えに詰まっています。
カードを配置した後のロジック部分でも進め方がピンと来ず、ヒントをいただければと思います。
よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは。

ご質問にあるJavaScriptを、以下の諸点で修正するとよいと思いました。

(1) for 文で for(i =0; としているところは、i の宣言に varを付けて、 for(var i =0; にする。

(2) カードを追加のところで、<li>要素の文字列を、数字を入れた配列の arrayに追加して
いるが、<li>を入れていく配列は別の変数にする。

　※この修正をすることで、

<li>の外にも数字の羅列が表示されてしまいます。

　の問題が解決されます。

　
(3) "<li data-num='array[i]'>" + '?' + "</li>" では、data-num属性に数字が
入らずに、"array[i]" という文字列が入ってしまうので、これを修正

(4) クリックハンドラで、 $(this).text(i); としているところは、 <li>の data-num属性
に入れた数字を.text()の引数にする。