質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.44%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

221閲覧

hasClass('open')について

chachanono

総合スコア6

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2024/05/01 13:53

実現したいこと

アコーディオンを作る際に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の演習等で確認したがわからなかった。

補足

特になし

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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

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

回答2

0

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

総合スコア69502

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

chachanono

2024/05/02 13:34

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

0

ベストアンサー

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

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

投稿2024/05/02 05:35

otn

総合スコア84882

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

chachanono

2024/05/09 08:14

回答ありがとうございました! すっきりと理解できました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.44%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問