質問: $(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("-"); } }); }); ``` ### 質問 2つあります。 質問タイトルが的確ではないかも知れませんが、短文で記載する上で的確な文章が思い当たらなかった為。 1 このjQueryコードが表している意味を、文章で書くとしたら何と表現しますか? このような意味であっていますか?(論理的に頭に入れた方が、理解しやすい為) 違う場合は訂正願います。↓ 「.faq-list-itemセレクタをクリックした際の話。 まず、$answerには、クリックした際にそのクリックイベントが起こった要素で、その子要素の.answerを代入。 もし、$answerにopenと言うクラスが***入っていた場合***、 $answerからopenクラスを**取り除き**、$answerをslideUpして**隠し**、 クリックされた要素の中のspan要素のテキストを + に変更する。 もし、$answerにopenと言うクラスが***入っていない場合***、 $answerには、openクラスを**付与し**、$answerをslideDownで**表示し**、 クリックされた要素の中のspan要素のテキストを - に変更する。」 2 ここで出てくる、 **open**は一体何者なんですか? removeClassやaddClassがある事からも、クラスと言う事はわかりますが、 cssにはそのopenセレクタは記載どこにもありません。 試しにopenを適当な文字に置き換えても出来たと言う事からも、jQueryで完結していると思うのですが。 この open は具体的に「何」でどう作用しているのでしょうか? 何故、open クラスがついた要素はもともとhtmlには存在しないのに、 jqueryの if文では、「もしopenが合った場合、もしopenがなかった場合」というコードなるのですか? elseの「もしない場合」は、 open クラスを付与するとの命令ですが、 openクラスつけたところで、cssでopenセレクタで指定しているわけでもないので、 何がどう変わるか理解出来ない状況です。 上記2点、宜しくお願いします。
回答: おす、おら、goku。 おめぇは「なんでopenクラスを付けたり外したりしてるのか全くわかんねぇぞ」って言ってるみてぇだが、 それは、すげぇ簡単な事だぞ。 openクラスはプログラミングで昔から使われている「フラグ」の代わりだぞ。 例えば、アコーディオンが1つだけだったとするだろ? その場合は、すっげぇ簡単に書くとこうなる。 ``` $(function() { var answer_opened = false; // ←アコーディオン開閉フラグ $('.faq-list-item').click(function() { var $answer = $(this).find('.answer'); if (answer_opened === true) // アコーディオンが開いていたら { $answer.slideUp(); // アコーディオンを閉じて $(this).find("span").text("+"); answer_opened = false; // 開閉フラグを下げる } else // 開いて無かったら { $answer.slideDown(); // アコーディオンを開いて $(this).find("span").text("-"); answer_opened = true; // フラグを立てる } }); }); ``` だけんど、アコーディオンは沢山あんだろ? そしたらおめぇ、開閉フラグはその数だけ作んなくちゃ行けねぇ。 管理も大変になってくる。おら、そんなめんどくせぇ事はしたくねぇ。 だからな、フラグをDOM要素そのものに埋め込んじまおうってのが、その「open」だ。 openクラスが無いアコーディオンは閉じているアコーディオンだから、クリックされたら開く動作をさせる、 openクラスがあるアコーディオンは開いているアコーディオンだから、クリックされたら閉じる動作をさせるってぇわけだ。おもしれぇだろ? おら、わっくわくすっぞ。 質問のサンプルは結構めぇから使われてるやり方だが 最近はclassに埋め込むよりも、HTML5で実装されたカスタムデータ属性を使って ``` $(selector).attr("data-opened", true); ``` ってやった方がいいと思うぞ。 ただ、openってクラス名はダメだと思うぞ。既に開いている状態を示すフラグなんだから、過去形にしねぇとな。 Progate の奴らはまともな命名も出来ねぇらしいな。修行が足んねぇぞ。 おらの説明はこんな感じだ。chi-chiが晩飯のオカズ狩って来いってうるせぇからそろそろで行ってくっぞ。 おめぇももっと修行して天下一武道会でおらと握手だ。