質問させてください。
jQueryでくじ引きゲームをしたいのですが、判定が機能しません。
<html lang="ja"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="box-container"> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> </body> </html> <style> .box { height: 200px; width: 200px; background: paleturquoise; transition: 1s; margin: 10px; text-align: center; line-height: 200px; } .win { border-radius: 50%; background:red; transform: rotate(360deg); background-size: cover; background-position: 46%; } </style> <script> $(function () { var num = Math.floor(Math.random() * 5) + 1; for (var i = 1; i <= 5; i++) { $('.box-container').append('<div class="box"></div>'); console.log('i:' + i); } $('.box').on('click', function () { if (i === num) { $('.box').text('win'); $('.box').addClass('win'); } else { $('.box').text('lose'); $('.box').addClass('lose'); } }) console.log('num:' + num); }); </script>
ここでやりたいことは
・.boxをクリックしてi===numであれば'win'という文字を表示させ、.winクラスを追加
・iとnumが違えば'lose'を表示し、.loseクラスを追加することです。
・'win'と表示させるのは一つのみ(4つは'lose')
です。
現在のコードではどの.boxをクリックしても'lose'と出てしまいます。
アドバイスお願いいたします。
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/09/01 18:32