質問: progateでjquery中級コースを学習しています。アコーディオン機能をつけることを学んでいるのですが、 スライド説明を見ても理解出来ないところがあるので、噛み砕いてどういう理由でこのコードが必要なんだみたいに教えて欲しいです。 ``` コード $('.faq-list-item').click(function(){ var $answer=$(this).find('.answer'); if($answer.hasClass('open')){ $answer.removeClass('open'); }else{ $answer.addClass('open'); } }); ``` 課題はリンク内容です。 リンクの質問文に書かれている『回答を得て、まだ理解出来ずにいる点』を見て下さい。 『$answerにはopenクラスがないから、hasClassでtrue,falseをそもそも判定できない(trueがない)と考えることしか理解出来ないです』。 まず、アコーディオンをつけるとクリックしたら隠れていた内容が出てくることは理解出来ています。 1、 `var $answer=$(this).find('.answer');`の部分で理解の仕方が正しいか教えて下さい 理解の仕方 (変数varがあるのは.answerクラスが複数あるから。) 2、 全く理解出来ないと感じる部分 hasClassメソッドは$answerにopenクラスがあるかないかを判定するものだけど、 今回、$answerにはどこのコードを見てもない。だからif文で判定したとしても、全部openがないパターンしかない。 そのため、openがあればremoveClassをとっての部分は成立しないんじゃ?と感じる。理解出来ないです。 ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/0403632e4812c793380cb4ae016d0349.png) この説明を見たんですが理解出来なかったです。
回答: > > 1、 > > var $answer=$(this).find('.answer');の部分で理解の仕方が正しいか教えて下さい > > 理解の仕方 (変数varがあるのは.answerクラスが複数あるから。) > > > 「.answer」というidの要素を探し(find)、「$answer」という変数(var)に入れている。 > > 2、 > > 全く理解出来ないと感じる部分 > > hasClassメソッドは$answerにopenクラスがあるかないかを判定するものだけど、 > > 今回、$answerにはどこのコードを見てもない。だからif文で判定したとしても、全部openがないパターンしかない。 > > >そのため、openがあればremoveClassをとっての部分は成立しないんじゃ? > > > 1度目はそのとおりで、if文のelseに流れます。 そこで1で取得した変数を使って`$answer.addClass('open');`が実行され、「open」クラスを追加しています。 これにより、2度目に同じif文に来た場合はif文がtrueになります。 そこでremoveClassが実行されると、最初の状態に戻ります。