問題

8
jQuery

丸ばつゲームを作ってみよう!

jQueryの問題に挑戦しよう!

問題

丸ばつゲームを作ってみよう!

今回はデモのようにクリックしたらターンごとに丸とバツが切り替わるようにしましょう

あらかじめエディタに書くコード

                    <div class="box">
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
</div>
¥HTML¥
                
                    .box{
  display: flex;
  border: 1px solid black;
  width: 306px;
  height: 306px;
  flex-wrap: wrap;
}
.content{
  width: 100px;
  height: 100px;
  border: 1px solid black;
  font-size: 5em;
  line-height: 100px;
  text-align: center;
}
¥CSS¥
                

期待する画面

解答と解説(丸ばつゲームを作ってみよう!)

解説

LINE登録して解答を見る

※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます

あらかじめ変数を用意しておいて1を代入しておきます。contentがクリックされた時にそのクリックされたcontentに何も記述がないか確かめて、その後countが奇数かどうか判別し、それによって当てはめる文字を変えています。そして最後にcountに++で1を足せば終了です。

さらにスキルアップしたい方は公式LINEから「jQuery」と送信すると動画が見れます。

LINE登録して動画を視聴する
あなたに合った学習プランは? 適正コース診断