はじめに

G's Academyの世界を変えるGEEKを目指すプログラミングスクールで、
jQueryの補講で簡易的な神経衰弱を作ることになったのですが
時間切れで皆かけていないと思うので、答えの一つとして公開します。
写経をするも良し、自分で動かしてから確認で見るも良し、何か力になれたら嬉しいです。

HTML

まず、補講授業にいなかった人の為に、HTMLの中身はこちら。

index.html

<meta http-equiv="content-type" charset="utf-8">
<body>
    <p></p>
    <div id="result">
        <div class="item">
            小菅
        </div>
        <div class="item">
            山崎
        </div>
        <div class="item">
            小菅
        </div>
    </div>
</body>

最初にmetaタグがあるのは、文字化け防止なので、そんなに気にしなくて大丈夫です。

やりたいこと

上のコードをブラウザで確認すると、以下のように表示されると思います。

この「小菅」、「山崎」、「小菅」の中で、
「小菅」と「山崎」を選択をした場合、アラートで「違うよ」と出し

「小菅」と「小菅」を選択をした場合、アラートで「同じだ」と出したいですよね。

JavaScript

ここからは、全てjavascriptでの処理になります。
続いてscriptタグの中身を書いて行くのですが、私は以下の中身で動きました。

test.js

let name1  = "";
let name2  = "";
let count  = 0;
let num    = 0; // 最初のクリックの時を、0（何もしない）。次のクリック1の時を、1(同じか違うか判断)
$(".item").on("click", function(){
    count++;
    name1 = $(this).text();
    if(num == 0){
        num++;
        name2 = $(this).text();
    }else if(name1 != name2){
        num = 0;
        name2 = "";
        alert("違うよ");
    }else if(name1 == name2){
        num = 0;
        name2 = "";
        alert("同じだ");
    }else{
        console.log("漏れがあるよ！");
    }
    $('p').text("現在のクリック数："+count);
});

簡単な解説

name1を、最初に選んだ名前
name2を、次に選んだ名前
countを、クリック回数
numを、最初に選んだか次に選んだかの判定に使います。

あとは、名前をクリックした後の時の処理を、
まずクリックしたカウントを数えさせてから、
name1にクリックした時の名前を入れ、
if文を使って条件分岐させて行きます。
①「最初に名前をクリック」
②「2回とも同じ名前をクリック」
③「違う名前をクリック」
④多分ないけど「その他」
以下の処理を通した後、カウント数をブラウザに表示（おまけ）

最後に

もし何かご指摘や、「俺はこう書いた！」などあれば、ご意見ください！！

G's Academy チューター
仲条高幸

【G's Lab6】jQueryによる神経衰弱の基礎

はじめに

HTML

やりたいこと

JavaScript

簡単な解説

最後に