Javascriptの（）内のopenがなぜ成立するか。

Question

JavaScriptの（）の中身はhtmlのセレクターのイメージがあったのですが、
下記のコードのopenがhtmlにもcssにもありません。
以下のopenはなぜ成立するんですか？

  $('.faq-list-item').click(function() {
    var $answer = $(this).find('.answer');
    if($answer.hasClass('open')) { 
      $answer.removeClass('open');
      // slideUpメソッドを用いて、$answerを隠してください
      $answer.slideUp();

      // 子要素のspanタグの中身をtextメソッドを用いて書き換えてください
      $(this).find("span").text("+");
      
    } else {
      $answer.addClass('open'); 
      // slideDownメソッドを用いて、$answerを表示してください
         $answer.slideDown();
      
      // 子要素のspanタグの中身をtextメソッドを用いて書き換えてください
      $(this).find("span").text("-");
      
    }
  });
});

Answer 1

下記のコードのopenがhtmlにもcssにもありません。

下の方の$answer.addClass('open');で、クラスを追加しています。

Comments

[退会済みユーザー]

回答ありがとうございます。
addClassでopenを追加して、hasClassでopenを持っているか、確認しているのですね！理解できました！
ただ、htmlにopenがないのに、なぜ $answer.removeClass('open');（4行目）をしているのでしょうか？

[maisumakun]

上の方は「if($answer.hasClass('open'))」なので、openが付いたあとで進むコードです。

[退会済みユーザー]

if($answer.hasClass('open'))でhtmlのanswerクラスにopenが追加されるから、removeClassでopenを取っているという意味ですか？

[maisumakun]

いえ、違います。clickのたびにこの関数が呼ばれるので、1回目でaddClassした後に2回目のクリックが行われると、openのある状態となっています。

[退会済みユーザー]

なるほど！
クリックするとanswerにopenがつくから、それをremoveClassで取っているわけですね！！
ありがとうございました。

Answer 2

何かのサンプルコードでしょうか。
以下の部分で動的にセレクタを追加しているので、HTML上になくても成立します。

$answer.addClass('open'); 

いわゆる、トグルというものですね（＋、－を交互に表示切替え）。
if-elseの中で、"open"を動的に追加・削除しています。
この場合、CSSで使う装飾的な意味のセレクタではなく、
JavaScriptで特定のHTMLにアクセスするための、マーカー的な意味で使っています。

Comments

[退会済みユーザー]

回答ありがとうございます。
プログラミングの学習サイトです。

トルグっていうんですね！
addClassはhtmlに追加していて、cssは関係ないんですね。

Answer 3

ざっくりこんな感じですかね

<script>
$(function(){
  $('.faq-list-item').on('click',function() {
    var flg=$(this).find('.answer').slideToggle().toggleClass('open').hasClass('open');
    $(this).find("span").text(flg?"-":"+");
  }).find('.answer').addClass('open');
});
</script>
<ul>
<li class="faq-list-item">
<span>-</span>faq1
<ul class="answer">
<li>ans1-1</li>
<li>ans1-2</li>
<li>ans1-3</li>
</ul>
</li>
<li class="faq-list-item">
<span>-</span>faq2
<ul class="answer">
<li>ans2-1</li>
<li>ans2-2</li>
<li>ans2-3</li>
</ul>
</li>
<li class="faq-list-item">
<span>-</span>faq3
<ul class="answer">
<li>ans3-1</li>
<li>ans3-2</li>
<li>ans3-3</li>
</ul>
</li>
</ul>

Comments

[退会済みユーザー]

ご回答ありがとうございます。

いまは読めないですが、ｊQｕｅｒｙをもっと勉強して詳しくなったら、解読してみます。