質問: $(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クラスの有無によって処理が変わる、というところまではわかるのですが、 1 "$(this).find('.answer');" を変数answerに代入しているのは、この構文をこの後何度も使うことになるから変数を使うことによって省略させているということでしょうか? 2 "$answer.hasClass('open')" の仕組みが把握できていません。 ここにあるopenクラス、HTMLにもCSSにもその記述が見当たらないので、どこからこのopenクラスが出てきているのかという点と、 openクラスはどのタイミングでついたり外れたりしているのかなと疑問に思っています。 (.answerには最初からopenクラスがついていないのに、クリックした箇所だけ急にopenクラスがつくのは何故だろう?と疑問に思っています。) 上手く説明できず申し訳ありませんが、ご教授頂けますと幸いです。
回答: 1. そうです。 2. 表示に関する機能もjQueryに同梱されているだけかと。 openは自分が勝手に設定しているclassのようなのでHTMLとJavaScriptのopenをmyflagみたいな適当な名前にしても動くはず。 処理の流れとして最初にページをロードした時にopen classは存在しないので初期のクリックはelseのブロックを発火させていて、そこでopanクラスをaddClassで勝手に追加設定している。