jQuery

jQuery:間違えた問題(「.faq-list-item」のclickイベント1)

jQuery:間違えた問題(「.faq-list-item」のclickイベントを作成してください)

FAQで質問をクリックしたときに回答が表示され、
回答が既に開いている場合は、質問をクリックすることで、回答部分が閉じるようにしたい。

その場合、clickイベントを作成し、clickイベント内でのプログラムの動きは以下のようにすればよい。

①クリックした要素の回答を探す。
②回答が開いていれば、回答部分を閉じ、回答が開いていなければ、回答部分を開ける。

この2番の動きが、if文による条件分岐になるので、
clickイベント内にif文を作ることになる。
さらに、ifの条件分岐を行う際、はじめに「クリックした要素の回答を探す」という動きが必要になるので、
今回のif文の条件は、「クリックした要素の回答を探し、回答が開いていれば」というパターンと
「クリックした要素の回答を探し、回答が開いていなければ」いうパターンになる。

つまり、$(.faq-list-item).find('.answer')と、if($('.answer').hasClass('open'))を
一つにまとめて条件を作ることになる。

※後半の条件である、「クリックした要素の回答を探し、回答が開いていなければ」の部分は
elseを使い省略できるので、考える必要はない。

if($('.answer').hasClass('open'))の$('.answer')部分をクリックした要素の回答にしたいので、
$(.faq-list-item).find('.answer')を変数を使ってまとめ、$('.answer')部分に置き換えて条件をつくる


まず、$(.faq-list-item).find('.answer')を変数として定義する
var $answer = $(.faq-list-item).find('.answer');

※$(.faq-list-item)はクリックした要素にあたり、 clickイベント
$('.faq-list-item').click(function(){};内で
既に登場しているので、thisを使って置き換えが可能。

これを、if($('.answer').hasClass('open'))の$('.answer')部分に置き換えると、
if($answer.hasClass('open'))となる
あとは、addClassとremoveClassを使って、条件に対する処理内容を書く。

正しい解答
 $('.faq-list-item').click(function() { 
   var $answer = $(this).find('.answer');
   if ($answer.hasClass('open')) {
       $answer.removeClass('open');
   } else {
       $answer.addClass('open');
   } 
 });  

 誤解答
 $('.faq-list-item').click(function(){ 
   var $answer = $('.answer');
   $(this).find($answer);
   if($answer.hasClass('open')){
      $answer.removeClass(open);
   } else {
   $answer.addClass(open);} 
 }); 

 class部分にanswerという名前を改めてつけただけで、全く意味がない。
 $(this).find($answer);の処理を置き換えていないので、faq-list-itemの傘下にある
 すべてのanswerが対象になってしまう。
 恐らく、どの質問をクリックしても、全部の回答が開くor閉じるという現象が起きる。

コメントを残す

メールアドレスが公開されることはありません。