質問: JavaScriptの勉強をしております。 ガイドブックの巻末にJqueryのコードがあり、 今回初めてをJqueryのコードを見ました。 以下のコードはガイドブックのサンプルコードで ブラウザ上でのHTMLの表示は画像の通りです。 大体の動作はわかるのですが、 ボックス(の中の対応する文字列)をクリックしたときのコードの意味と 動作が理解できません。 **わからない部分は2か所あり1つ目は以下のコードです。** 「**$('.check').on('click', function() {**」 このコードではクリックした時のプロパティは 「('.check').~~on('click',)~~」だけです。 そのためクラスに「check」があるもの全て(=3つのボックス全て) が対象になると思います。 要するに、クリックした時の対象が3つのボックス全てに なってしまうので、「('.check').~~on('click',)~~」以外に **何かもう1つ属性の指定が必要になるように思います。** ですが、実際にはこのコードでクリックした時にテキストが 「残席わずか」とか「お席あります」に変更されたり jsonから取得したプロパティによりテキストの背景色を 赤や緑に変更されてクリックしたボックスだけが正常に動作します。 なぜ、クリックした時に発動される属性に 「**$('.check').on('click', function() {**」しかないのに、 クリックしたボックスだけを選んで (※3個ある「class="check"」のある要素の中からクリックされたものだけを選んで) イベントを発動させることが出来るのでしょうか? --- **わからない部分の2つ目は以下のコードです**。 「**if($(this).hasClass('crowded'))**」 この場合の「**$(this)**」は「クリックされた対象」 (=「$('.check')」の中でクリックされた要素) と思って良いのでしょうか? すいませんが詳しい方、説明の上手な方、 jquery(JavaScript)でイベントの対象となる要素が複数あった時に、 クリックされた要素を判定する方法について教えて下さい。 サンプルのコードは以下の通りです。 ↓ Jquery(一部、JavaScript) ``` ``` 外部ファイルの「data-A.json」は以下の通りです。 ``` [ {"id":"js","crowded":"yes"}, {"id":"security","crowded":"no"}, {"id":"uiux","crowded":"no"} ] ``` 一応、HTML/CSSも貼っておきます。 ``` JavaScript勉強会 空き状況を確認 セキュリティ対策講座 空き状況を確認 UI/UXハッカソン 空き状況を確認 ``` ブラウザ上でのHTMLページの表示は画像の通りです。 ![![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/44de11c5d0d59f5cc823f9e656f018da.jpeg)](e9e1ed8584cc03ab61caf2280d26539e.jpeg)
回答: > > なぜ、クリックした時に発動される属性に > > 「$('.check').on('click', function() {」しかないのに、 > > > クリックしたボックスだけを選んで > > (※3個ある「class="check"」のある要素の中からクリックされたものだけを選んで) > > イベントを発動させることが出来るのでしょうか? > > > いえ、イベントは**どのチェックボックスでも同じように発動します**。動いたイベントハンドラの中身で、どのチェックボックスがチェックされたかを識別して、別個の動作を行います。 > > この場合の「$(this)」は「クリックされた対象」 > > (=「$('.check')」の中でクリックされた要素) > > と思って良いのでしょうか? > > > はい、そのとおりです。