hasClass('open')について

実現したいこと

アコーディオンを作る際にhasClass('open')のopenクラスがhtmlへと記載がないのに関わらず、何故if条件が設定できるのかが分かりません。
hasClassは（　）部分のオブジェクトが持っているか判定する際に使用するメソッドではないのでしょうか？
openクラスがないならfalseの場合しか起こりえないのではないでしょうか？

発生している問題・分からないこと

アコーディオンを作る際にhasClass('open')のopenクラスがhtmlへと記載がないのに関わらず、何故if条件が設定できるのかが分かりません。
openクラスがないならfalseの場合しか起こりえないのではないでしょうか？

該当のソースコード

index.html
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <title>Progate</title>
6  <link rel="stylesheet" type="text/css" href="stylesheet.css">
7  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
8  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
9</head>
10<body>
11  <header>
12    <div class="container">
13      <div class="header-left">
14        <img class="logo" src="https://prog-8.com/images/html/advanced/main_logo.png">
15      </div>
16      <div class="header-right">
17        <div class="login">ログイン</div>
18      </div>
19    </div>
20  </header>
21  <div class="signup-modal-wrapper" id="signup-modal">
22    <div class="modal">
23      <div id="close-modal">
24        <i class="fa fa-2x fa-times"></i>
25      </div>
26      <div id="signup-form">
27        <h2>Emailで新規登録</h2>
28        <form action="#">
29          <input class="form-control" type="text" placeholder="メールアドレス">
30          <input class="form-control" type="password" placeholder="パスワード">
31          <div id="submit-btn">新規登録</div>
32        </form>
33      </div>
34    </div>
35  </div>
36  <div class="top-wrapper">
37    <div class="container">
38      <h1>LEARN TO CODE.<br>LEARN TO BE CREATIVE.</h1>
39      <p>progateはオンラインプログラミング学習サービスです。<br>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>
40      <div class="btn signup signup-show">新規登録はこちら</div>
41      <p>or</p>
42      <div class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</div>
43      <div class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</div>
44    </div>
45  </div>
46  <div class="lesson-wrapper">
47    <div class="container">
48      <div class="heading">
49        <h2>Learn Where to Get Started!</h2>
50      </div>
51      <div class="lessons">
52        <div class="lesson lesson-hover">
53          <div class="lesson-icon">
54            <img src="https://prog-8.com/images/html/advanced/html.png">
55            <p>HTML & CSS</p>
56          </div>
57          <p class="text-contents">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>
58        </div>
59        <div class="lesson">
60          <div class="lesson-icon">
61            <img src="https://prog-8.com/images/html/advanced/jQuery.png">
62            <p>jQuery</p>
63          </div>
64          <p class="text-contents">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</p>
65        </div>
66        <div class="lesson">
67          <div class="lesson-icon">
68            <img src="https://prog-8.com/images/html/advanced/ruby.png">
69            <p>Ruby</p>
70          </div>
71          <p class="text-contents">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p>
72        </div>
73        <div class="lesson">
74          <div class="lesson-icon">
75            <img src="https://prog-8.com/images/html/advanced/php.png">
76            <p>PHP</p>
77          </div>
78          <p class="text-contents">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p>
79        </div>
80      </div>
81    </div>
82  </div>
83  <div class="faq-wrapper">
84    <div class="container">
85      <div class="heading">
86        <h2>FAQ</h2>
87      </div>
88      <div class="faq">
89        <ul id="faq-list">
90          <li class="faq-list-item">
91            <h3 class="question">Progateの公式キャラクターはなんですか？</h3>
92            <span>+</span>
93            <div class="answer">
94              <p>にんじゃわんこといいます。忍者の格好をしたわんこです。ネコではありません。</p>
95            </div>
96          </li>
97          <li class="faq-list-item">
98            <h3 class="question">にんじゃわんこはオスですか？それともメスですか？</h3>
99            <span>+</span>
100            <div class="answer">
101              <p>にんじゃわんこはオスです。</p>
102            </div>
103          </li>
104          <li class="faq-list-item">
105            <h3 class="question">にんじゃわんこは何歳ですか？</h3>
106            <span>+</span>
107            <div class="answer">
108              <p>にんじゃわんこは14歳です。</p>
109            </div>
110          </li>
111        </ul>
112      </div>
113    </div>
114  </div>
115  <div class="message-wrapper">
116    <div class="container">
117      <div class="heading">
118        <h2>さぁ、あなたもProgateでプログラミングを学んでみませんか?</h2>
119        <h3 id="tagline">Let's learn to code, learn to be creative!</h3>
120      </div>
121      <span class="btn message signup-show">さっそく開発する</span>
122    </div>
123  </div>
124  <footer>
125    <div class="container">
126      <img src="https://prog-8.com/images/html/advanced/footer_logo.png">
127      <p>Learn to Code,Learn to be Creative.</p>
128    </div>
129  </footer>
130  <script src="script.js"></script>
131</body>
132</html>

script.js
1$(function() {
2
3  // 新規登録モーダル
4
5  $('.signup-show').click(function() {
6    $('#signup-modal').fadeIn();
7  });
8
9  $('#close-modal').click(function() {
10    $('#signup-modal').fadeOut();
11  });
12
13  // 言語一覧
14
15  $('.lesson').hover(
16    function() {
17      $(this).find('.text-contents').addClass('text-active');
18    },
19    function() {
20      $(this).find('.text-contents').removeClass('text-active');
21    }
22  );
23  
24  $('.faq-list-item').click(function() {
25    var $answer = $(this).find('.answer');
26    if($answer.hasClass('open')) {
27      $answer.removeClass('open');
28      $answer.slideUp();
29      $(this).find('span').text('+')
30      
31    } else {
32    $answer.addClass('open');
33    $answer.slideDown();
34    $(this).find('span').text('-')
35  
36    }
37  });
38});

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

progateの演習等で確認したがわからなかった。

補足

特になし

usm2030

2024/05/01 14:53

CSSのクラスを普通はオブジェクトという言い方はしないと思いますが、単にhasClassは引数に受けとったCSSクラスが適用されているか？を確認して、結果を返すだけと思います。したがって、あるならtrue、ないならfalseを返すというわけで、「なくても判定できる」のは正しい挙動になるかと。後続の処理では「あればopenを消して」「無ければopenを加える」ということをしています。加えるタイミングがあるために、このコードは到達不可能にもなっていないです。

winterboum

2024/05/01 23:04

「hasClass」のclassをオブジェクト指向で言うところのclassと思ってません？この場合のclass は ⇑でusm2030さんが言ってるように CSS のclass です。

chachanono

2024/05/02 12:50

回答ありがとうございます。いまいち理解ができていないのですが、 if($answer.hasClass('open'))はただ単にopenというCSSクラスが後続の処理で設定されていたらというその処理を実行するということでしょうか？「加えるタイミングがある」というのは$answer.addClass('open');でopenクラスを加える。 $answer.removeClass('open');でopenクラスが加えられている状態の物を取り除くという認識でしょうか？

usm2030

2024/05/02 12:59

その通りです

chachanono

2024/05/02 13:24

コメントありがとうございます。⚪︎⚪︎を試したところ問題が解決しました！ベストアンサーに選びたいので同じ内容を回答欄に投稿いただけますでしょうか？

行動規範の内容に同意します

回答2件

htmlへと記載がないのに関わらず

ブラウザのJavaScriptはHTML内に要素や属性値を追加できます。追加した要素や属性値を元に判定することも当然可能です。

openクラスがないならfalseの場合しか起こりえない

最初の1回はそうでしょう。
if文が記載されている箇所は、「クリック時に実行」されるコードなので、2回目以降はfalseあるでしょう。（提示されたコードには「open」を追加する記述があります）

js
1$('.faq-list-item').click(function() {
2	/* clickするたび毎回実行される */
3});

デベロッパーツールを使うと「open」が追加される様子を確認できると思います。

投稿2024/05/02 07:21

kei344

総合スコア69563

chachanono

2024/05/02 13:34

回答ありがとうございました！やっと理解することができました！

行動規範の内容に同意します

ベストアンサー

openクラスがhtmlへと記載がないのに関わらず、

処理全体を見ましょう。
初回は$answer.hasClass('open')が偽になるので、else側に行きます。
else部分で$answer.addClass('open');しているので、次に同じノードを$answer.hasClass('open')で調べると真で、今度はthen側に行きます。
そこで$answer.removeClass('open');しているので次はまた偽となり、繰り返しです。

投稿2024/05/02 05:35