progateで、jQueryを勉強している者です。現在、jQuery中級編、アコーディオン機能を実装するレッスンをしているのですが、理解できない部分がいくつかあり、先に進めないので、こちらで質問をさせて頂きます。 ```ここに言語を入力【HTML】

質問文
+

質問の答え

``` ```ここに言語を入力【jQuery】 $('.faq-list-item').click(function() { var $answer = $(this).find('.answer'); if($answer.hasClass('open')) { $answer.removeClass('open'); $answer.slideUp(); $(this).find('span').text('+'); } else { $answer.addClass('open'); $answer.slideDown(); $(this).find('span').text('-'); } }); ``` .faq-list-item(li要素)にクリックイベントを設定して、その.faq-list-itemの中にある.answerを探し出して、その.answerにopenクラスがあるかないかを判断、 openクラスの有無によって処理が変わる、というところまではわかるのですが、 ① "$(this).find('.answer');" を変数answerに代入しているのは、この構文をこの後何度も使うことになるから変数を使うことによって省略させているということでしょうか？ ② "$answer.hasClass('open')" の仕組みが把握できていません。ここにあるopenクラス、HTMLにもCSSにもその記述が見当たらないので、どこからこのopenクラスが出てきているのかという点と、 openクラスはどのタイミングでついたり外れたりしているのかなと疑問に思っています。（.answerには最初からopenクラスがついていないのに、クリックした箇所だけ急にopenクラスがつくのは何故だろう？と疑問に思っています。）上手く説明できず申し訳ありませんが、ご教授頂けますと幸いです。

質問文