jQuery

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

FAQのアコーディオン

(回答が表示されているとき、spanを「+}から「-」に、
 回答が表示されていないときspanを「-」から「+」表示に)
 
前回、クリックした質問の回答が開くように$(this).find('.answer');という記述をしたが、
今回もそれと同様に$(this).find('span');という記述をし、
クリックした質問の「+」と「-」の表記が条件によって変わるようにする。
この記述がないとき、クリックした部分のspanだけでなく、
すべての質問にある「+」と「-」表記が一斉に変わってしまう。

前回同様、$(this).find('span');を変数と定義して、記述した解答が以下の通り。
varで定義するときは、if文の外で定義する。
if文内で定義すると、その条件内でしか適用されない。
if文ごとに定義する必要が出てきてしまうので、注意が必要。

この記述をするにあたって考えたこと
$(this).find('span')と$('span').text('+');
この2文を一つにまとめて記述したい

パターン①省略せずにそのまま書いた書き方
      $(this).find('span').text('+');

パターン②変数を定義して省略した書き方
      var $span = $(this).find('span');
      $span.text('+');
      
varを定義し、省略した書き方

 $('.faq-list-item').click(function() {
  var $answer = $(this).find('.answer');
  var $span = $(this).find('span');
  if ($answer.hasClass('open')) {
    $answer.removeClass('open');
    $answer.slideUp();
    $span.text('+');
  } else {
    $answer.addClass('open');
    $answer.slideDown();
    $span.text('-');
  }
 });

 変数を定義せず、$(this).find('span')のまま記述した書き方

 前回、変数を定義した$(this).find('.answer')の部分も変数を定義せずに書くと
 全体の記述は以下のようになり、if文内の記述などが特に見にくくなる。
 繰り返し出てくるオブジェクトの処理は、変数を定義した方が良い。

 $('.faq-list-item').click(function() {
   if($(this).find('.answer').hasClass('open')) { 
      $(this).find('.answer').removeClass('open');
      $(this).find('.answer').slideUp();
      $(this).find('span').text('+');
     } else {
      $(this).find('.answer').addClass('open'); 
      $(this).find('.answer').slideDown();
      $(this).find('span').text('-');
   }
 });

コメントを残す

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