jQueryで要素をクリックした時、ランダムな数字を引き当てるとクラスを追加したい。

質問させてください。
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'と表示させるのは一つのみ（４つは'lose')
です。

現在のコードではどの.boxをクリックしても'lose'と出てしまいます。
アドバイスお願いいたします。

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

回答3件

提示されたコードのiは判定する時点で必ず6になります。data属性でも付けて区別しないと、numと比較してもfalseになります。

js
1  for (var i = 1; i <= 5; i++) {
2    $('.box-container').append('<div class="box" data-num="' + i + '"></div>');
3  }
4　console.log('i:' + i); // 6

【data-* - HTML: HyperText Markup Language | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/data-*

追記：

JavaScript
1var num = Math.floor( Math.random() * 5 ) + 1;
2var $container = $( '.box-container' );
3for ( var i = 1; i <= 5; i++ ) {
4	$container.append( '<div class="box" data-num="' + i + '"></div>' );
5}
6$container.on( 'click', '.box', function () {
7	if ( $( this ).data( 'num' ) === num ) $( this ).text( 'win' ).addClass( 'win' );
8	$( '.box', $container ).not( '.win' ).text( 'lose' ).addClass( 'lose' );
9} );
10```**動くサンプル：**[https://jsfiddle.net/fmbh0crj/](https://jsfiddle.net/fmbh0crj/)
11
12---
13
14【.not() | jQuery API Documentation】
15[https://api.jquery.com/not/](https://api.jquery.com/not/)

投稿2019/09/01 17:08

編集2019/09/01 17:44

kei344

総合スコア69398

kei344

2019/09/01 18:32

「'win'と表示させるのは一つのみ（４つは'lose')」という条件は多分「クリックした物があたりなら'win'そうでない物は'lose'と表示」という意味かと思いました。

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

ベストアンサー

こんにちは
修正案の一例を回答します。

ご質問に挙げられているコードの問題点は、以下の(1),(2) の２点です。

(1) .box がクリックされたときに呼ばれる関数の中で、if (i === num) { のところの

i の値は、for (var i = 1; i <= 5; i++) { のループから抜けたときの値なので、 6 になっている。
num は 1以上5以下

なので、i === num は常にfalse になる。

(2) text() と addClass() で winかloseを設定している対象が $('.box')になっており、これだと、全 .box が対象になってしまう。

上記の(1)(2) によって

現在のコードではどの.boxをクリックしても'lose'と出てしまいます。

ということになります。上記の対応含めて、以下のように修正します。

for (var i の var を let に修正。また以下にあわせて、i を（1以上5以下ではなく）0から4で回す。
.boxのクリックハンドラ内で、 num との比較対象を、クリックされた .boxのインデクス（0始まり)とする。
上記にあわせて、 numは 0以上4以下となるように修正
text() と addClass() の対象をクリックされた、当該の .box に限るようにする。
.box の個数を定数 NUM_BOXES とする。

上記の諸点を修正したものが以下です。

javascript
1$(function () {
2  const NUM_BOXES = 5;
3  const num = Math.floor(Math.random() * NUM_BOXES);
4
5  for (let i = 0; i < NUM_BOXES; i++) {
6    $('.box-container').append('<div class="box"></div>');
7    console.log('i:' + i);
8  }
9
10  $('.box').on('click', function () {
11    if ($('.box').index(this) === num) {
12      $(this).text('win');
13      $(this).addClass('win');
14     } else {
15      $(this).text('lose');
16      $(this).addClass('lose');
17     }
18  });
19
20  console.log('num:' + num);
21});

上記のコードで、 .box に設定しているクリックハンドラは、以下のように短く書くことができます。

javascript
1$('.box').on('click', function () {
2  const winOrLose = $('.box').index(this) === num ? 'win' : 'lose';
3  $(this).text(winOrLose).addClass(winOrLose);
4});

動作確認用 CodePen: https://codepen.io/jun68ykt/pen/bGbrJzw

以上、参考になれば幸いです。

投稿2019/09/01 18:24

編集2019/09/01 18:41

jun68ykt

総合スコア9058

mkscia

2019/09/02 13:37

iがループ処理から外れていたからfalseになっていたのですね。一つをクリックしたらほか全てが'lose'となっていたのも、クラスを指定していたからでしたか... おかげで様で思った通りの動作を実装することが出来ました。大変わかりやすい説明ありがとうございました。

jun68ykt

2019/09/03 00:21

どういたしまして。 > 思った通りの動作を実装することが出来ました。とのことでよかったです????

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

添削してみましたが、こんなかんじでいかがでしょうか（動作未確認ですmm

javascript
1$(function () {
2var num = Math.floor(Math.random() * 5) + 1;
3  // 動作としては i を定義; ループが終わったら i++; i<=5じゃなければ抜ける
4  // つまりこの for が終わった時点で i == 6
5  for (var i = 1; i <= 5; i++) {  
6   $('.box-container').append('<div class="box"></div>');
7　　console.log('i:' + i);
8  }
9
10  // $('.box').on('click', function () { // 誤 全部の .box に同じ click の動作を設定しまっている
11  $(.box).each(function(index, box){ // 正 クリックされた .box が何番目か判定する必要があるので、 each で何番目かのindex と一緒に順番にイベント設定
12    // if (i === num) { // 誤 i == 6になっている
13    if (index === num) { // 正 index を使う
14      box.on('click', function () 
15        box.text('win');
16        box.addClass('win');
17      });
18    } else {
19      box.on('click', function () {
20        box.text('lose');
21        box.addClass('lose');
22      });
23    }
24  })
25console.log('num:' + num);
26});