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

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

ただいまの
回答率

88.82%

jQueryのaddClass指定したクラスは何者??

解決済

回答 5

投稿 編集

  • 評価
  • クリップ 3
  • VIEW 3,376
退会済みユーザー

退会済みユーザー

環境:Mac、Atom

ProgateのjQueryにて下記のコードでアコーディオンを作成しました。
(※これは、自分で1から作成したコードではなく、Progateで用意されていたものを使用)
※質問は下にあります。

HTML/CSS/jQueryのコード

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery練習</title>
  <link rel="stylesheet" href="../css/style.css">
</head>
<body>

  <div class="faq-wrapper">
    <div class="heading">
      <h2>FAQ</h2>
    </div>
    <div class="faq">
      <ul id="faq-list">
        <li class="faq-list-item">
          <h3 class="question">質問質問質問質問質問質問</h3>
          <span>+</span>
          <div class="answer">
            <p>回答回答回答回答回答回答</p>
          </div>
        </li>
        <li class="faq-list-item">
          <h3 class="question">質問質問質問質問質問質問</h3>
          <span>+</span>
          <div class="answer">
            <p>回答回答回答回答回答回答</p>
          </div>
        </li>
        <li class="faq-list-item">
          <h3 class="question">質問質問質問質問質問質問</h3>
          <span>+</span>
          <div class="answer">
            <p>回答回答回答回答回答回答</p>
          </div>
        </li>
      </ul>
    </div>
  </div>

  <script src="../JavaScript/jquery-3.4.1.min.js"></script>
  <script src="../JavaScript/script.js"></script>
</body>
</html>
body {
  margin: 0;
}

a {
  text-decoration: none;
}

.faq-wrapper {
  background-color: #e6ecf0;
  text-align: center;
  padding-bottom: 80px;
  color: #5f5d60;
}

#faq-list {
  width: 500px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.faq-list-item {
  margin:10px;
  border-bottom:1px solid #ccc;
  position:relative;
  cursor:pointer;
  text-align: left;
}

.faq-list-item h3 {
  font-size: 14px;
}

.faq-list-item span {
  position:absolute;
  top:0;
  right:5px;
  color:#ccc;
  font-size:13px;
}

.answer {
  font-size: 12px;
  padding: 5px 0px;
  margin-bottom: 15px;
  display: none;
}
/*↑displayはnoneに  */
$(function() {

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

    } else {
      $answer.addClass('open');
      $answer.slideDown();
      $(this).find("span").text("-");
    }
  });


});

質問 2つあります。

質問タイトルが的確ではないかも知れませんが、短文で記載する上で的確な文章が思い当たらなかった為。


このjQueryコードが表している意味を、文章で書くとしたら何と表現しますか?
このような意味であっていますか?(論理的に頭に入れた方が、理解しやすい為)
違う場合は訂正願います。↓

「.faq-list-itemセレクタをクリックした際の話。
まず、$answerには、クリックした際にそのクリックイベントが起こった要素で、その子要素の.answerを代入。
もし、$answerにopenと言うクラスが入っていた場合
$answerからopenクラスを取り除き、$answerをslideUpして隠し
クリックされた要素の中のspan要素のテキストを + に変更する。

もし、$answerにopenと言うクラスが入っていない場合
$answerには、openクラスを付与し、$answerをslideDownで表示し
クリックされた要素の中のspan要素のテキストを - に変更する。」


ここで出てくる、 open は一体何者なんですか?
removeClassやaddClassがある事からも、クラスと言う事はわかりますが、
cssにはそのopenセレクタは記載どこにもありません。
試しにopenを適当な文字に置き換えても出来たと言う事からも、jQueryで完結していると思うのですが。
この open は具体的に「何」でどう作用しているのでしょうか?

何故、open クラスがついた要素はもともとhtmlには存在しないのに、
jqueryの if文では、「もしopenが合った場合、もしopenがなかった場合」というコードなるのですか?
elseの「もしない場合」は、 open クラスを付与するとの命令ですが、
openクラスつけたところで、cssでopenセレクタで指定しているわけでもないので、
何がどう変わるか理解出来ない状況です。

上記2点、宜しくお願いします。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2019/06/01 20:52

    別から持ってきたものであれば出典の明記は必要です。何も記載がなければ主語は投稿者です。

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2019/06/01 21:08

    なるほど、確かにそうですね。
    仮に自分で記述したコードだったとしても、
    質問の趣旨からニュアンスを汲み取って頂けると思ってました。

    追記しました。
    ご回答、宜しくお願いします。

    キャンセル

  • m.ts10806

    2019/06/01 21:21

    ちょっと細かいこと言うと、回答者観点では「自身で書いたコードは自分が一番分かっているもの」という前提があります。例えコピペであっても目的を実現するためであれば意味をきちんと理解して持ってこないと使いこなせないので。
    コピペ元のコードが理解できないのであれば、「自身のコードに組み込んだコピペコード」よりも「このサイトのこのコード」と提示された方が見やすいです(ただコードの解説依頼って厳密に言うと非推奨質問にあたるので、私も今回ちゃんとは答えてません)

    キャンセル

回答 5

+5

直接的な回答をしない理由

まず、「$answer.addClass('open') が何のためにあるのか」を一から十まで筋道立てて説明する事は可能です。
しかし、そうした場合、質問者さんは回答にある考えの流れをなぞって答えを出すことになり、「自分の頭で真に理解した」とはいえないだろうと考えています。

「自分の頭で真に理解した」というのは、回答にある文章を全て忘れて、一から自分の言葉で全てを説明できる状態の事です。
これが出来る人は、回答で構成されている中核となる要素を分解して自分の頭で考えを再構築し、自分の言葉で説明しなおすという作業をしています。
経験上、そういう方の質問は「このコードはこういう動きをしており、こうなるはずなのですが、なぜかこうなってしまいます」のように自分の考えを添えながら、「自分の考えから想定される結果」と「事実上の結果」に相違がある部分を質問します。
「わからない部分」がより明確で具体的です。

残念ながら、質問者さんはそうした質問ではない為、一から十まで説明するのはかえって理解から遠ざかると考えています。

ヒント

というわけで、考え方のヒントだけを出します。

  • 1回目のクリック時の動きはどうなっているか
  • 2回目のクリック時の動きはどうなっているか
  • 1回目/2回目の動きが異なる場合、どうやってその違いを認識しているか

基本的にはコードの動きをなぞるだけではダメで、設計者の気持ちになって、「この機能をどうやって実装しようか」という観点に立つのが重要と思います。

車輪の再発明

「設計者の気持ちになってみる」という観点では、一から自分で作り直してみるのも有効です。
一般に車輪の再発明はプログラミングでは敬遠される行為ですが、再発明する事で原理をよく理解できるようになります。

※余談ですが、「もっと良い実装があるのに…」と思ってしまう問題なので、別の実装法を考えてみるのも面白いと思います。
おそらく、Progate出題者はjQuery APIを熟知していません(APIを知っていれば、jQueryを使用していながら、独自コードに頼らない部分があります)。

Re: muchitaro さん

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/06/02 12:53

    >Zuishin
    >なんでこんなのの電話を受ける人がいると思ったんだろう。
    例えばの話よ。Yahoo!知恵袋見ればわかる通り、答えたくてたまらない人間や、揚げ足取りを生き甲斐にしてる愚かな人間が腐る程いるだろ?
    それなら、例えば電話機能があっても登録する人間はわりといてもおかしくないと思ったまで。
    別に深い意味はない

    キャンセル

  • 2019/06/02 13:22

    > と言った感じです。しかし文章って伝わりづらいものですな...
    > 直接、電話や対面システムがあれば良いのに...。

    そんなサービスいらねぇだろ。
    おらは、ネチネチグチグチ嫌味言う奴が黙ればいいだけだと思うぞ。

    キャンセル

  • 2019/06/02 13:33

    goku59
    例えばの話よ笑 例えば。

    好きな奴がやればええ。それだけだgokuよ

    キャンセル

+2

論理的・・・で言うとコードをそのまま文章化しただけのものはあまり有用とは言えません。
大目的部分がどうなっているか→それを実現するための処理 と考えた方が良いでしょう。
同じ目的のことを実現するやり方は1つではないという観点から、「合ってるか」という質問であればここはお答えしかねます。
むしろ「同じ目的を別のやり方で実現するとしたらどうなるか」を考えた方がロジカルと言えるでしょう。

CSSにないからとそのクラス名をつけられないわけではないので「何者か」と言うと
「付け外しされているだけのクラス」としか表現しようがないと思います。
何のためか?というと今回提示された内容だけでは判断が不可能です。
オンライン学習使ったことはないですが章立てで進んでいるものなんでしょうし
今後何かで使う機会もあるかもしれませんね。

ほぼほぼ同じようなところをやっていそうな質問があるので参考にされてみてはと。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/06/02 11:33

    >答えたくないとかではなく「憶測では答えられない」
    →あなたが言っている事はわかりました。

    >回答依頼してない人が答えてはいけないルールはないですし、それを強制することは知見を聞ける機会を失することにもなります。
    →それは当然ですが、結局回答になっていなかったもので。(私目線)

    >コードの責任は基本的に書いた人にあります。プロゲートが用意したコードである以上、プロゲートにしか真意や本意を伝えることはできません。(さすがにここはわかってほしい)
    →少し納得行かない部分もありますが、mtsさんが言うのならわかりました。ポジティブに捉えます。

    >回答する以上は憶測はもちろん推測で答えるのも望ましくないです(ここもわかって欲しい)
    → これって、そもそも憶測で答えたらまるで違う回答になる可能性が十二分にありえると言う事でしょうか?質問した私が言うのもアレですが、そんなに複雑で難しい質問でしょうか?
    open の意味、概念を説明するにあたり、憶測や想像しないと答えられないレベルなのですか?
    そんなに大それた事を問うてるつもりは「私は」ないのですが...。

    >推測なら既に書いた通りです。「やり方は一つではない。クラス付け替えじゃなくても実現は可能そう」。もうひとつ言うなら「openという名前に挙動上の意味はなさそう」くらいですかね。
    →失礼ながら、質問内容の回答(推測)になっていないかと存じます。
    「他にやり方はありますか?」のような質問内容ではありません。
    何故、推測だとしてもそのような回答になるのでしょうか。

    単に、 「opneの意味、概念は?」と問うてるだけですよ?

    何故そこから、「やり方は一つではない。」の話になるのでしょう?
    その事は、聞いておりません。

    キャンセル

  • 2019/06/02 11:39

    言い合いに関してはおいといて
    > open の意味、概念を説明するにあたり、憶測や想像しないと答えられないレベルなのですか?
    についてはわたしの回答だと伝わらないかしらん?muchitaroさんの質問文見た感じで、この回答で伝わるだろうと思って書いた回答なのだけど

    キャンセル

  • 2019/06/02 11:42 編集

    なんかずれてきたので、あとは頑張ってくださいとしか。
    プロゲートのスタンスはプロゲートにしか知らないわけですし、それを他人に憶測で答えてもらったところで論理的理解にはつながらないですよと言っているわけですし。
    openという名前だけにこだわりすぎててコードがやろうとしている目的、要件から離れてきてます。
    「実現方法がひとつではない」についてもそこだけ切り取るとそうなります。前後の流れを大切にしてください。でないとどの回答も論理的な理解にはたどり着けませんよ。
    ※hentaimanさんの回答はそのあたりきちんと答えてくれてますが

    キャンセル

+1

ここで出てくる、 open は一体何者なんですか?

openしてるかどうかの判断に使いたかっただけだから、$answer.attrで取得しても良いし、addClassじゃなくてattrやdataを使っても良い
hasClassって書いてあるのが読みやすい(と思ったから)使ってるんだろうけど、勉強する立場からしたらattrとかで書いてくれてる方が理解しやすいだろうと思う

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/06/02 18:14

    終了するってどういう意味だ?
    おら、わかんねぇぞ。

    キャンセル

  • 2019/06/02 18:14

    あ、わかったぞ。

    キャンセル

  • 2019/06/02 19:48

    > 単純に、「最初からこう言う回答欲しかったのよ」と伝えたかっただけよ。
    それならそのまま「最初からこう言う回答欲しかった」とコメントにも書いといてくれたら良かったよ
    回答者の回答を冷たく感じるというのは分かるので、直接的な回答しようと思って書いただけなので、その上で分からないとコメントくれればまた追加で返答するし、もう解決したのならコメントする気無かったよ
    結果的に直接的な回答と思えなかった事は仕方ないけど、質問者のレベルを質問文から判断して書いたものなので仕方ない。実際の能力よりも高い知識や能力があると見積もって回答した結果がこれなだけです。

    キャンセル

-1

おす、おら、goku。

おめぇは「なんでopenクラスを付けたり外したりしてるのか全くわかんねぇぞ」って言ってるみてぇだが、
それは、すげぇ簡単な事だぞ。

openクラスはプログラミングで昔から使われている「フラグ」の代わりだぞ。

例えば、アコーディオンが1つだけだったとするだろ?
その場合は、すっげぇ簡単に書くとこうなる。

$(function()
{
  var answer_opened = false;    // ←アコーディオン開閉フラグ

  $('.faq-list-item').click(function()
  {
    var $answer = $(this).find('.answer');

    if (answer_opened === true)  // アコーディオンが開いていたら
    {
      $answer.slideUp();         // アコーディオンを閉じて
      $(this).find("span").text("+");
      answer_opened = false;     // 開閉フラグを下げる
    }
    else    // 開いて無かったら
    {
      $answer.slideDown();       // アコーディオンを開いて
      $(this).find("span").text("-");
      answer_opened = true;     // フラグを立てる
    }
  });
});

だけんど、アコーディオンは沢山あんだろ? そしたらおめぇ、開閉フラグはその数だけ作んなくちゃ行けねぇ。
管理も大変になってくる。おら、そんなめんどくせぇ事はしたくねぇ。

だからな、フラグをDOM要素そのものに埋め込んじまおうってのが、その「open」だ。

openクラスが無いアコーディオンは閉じているアコーディオンだから、クリックされたら開く動作をさせる、
openクラスがあるアコーディオンは開いているアコーディオンだから、クリックされたら閉じる動作をさせるってぇわけだ。おもしれぇだろ? おら、わっくわくすっぞ。

質問のサンプルは結構めぇから使われてるやり方だが
最近はclassに埋め込むよりも、HTML5で実装されたカスタムデータ属性を使って

$(selector).attr("data-opened", true);

ってやった方がいいと思うぞ。

ただ、openってクラス名はダメだと思うぞ。既に開いている状態を示すフラグなんだから、過去形にしねぇとな。
Progate の奴らはまともな命名も出来ねぇらしいな。修行が足んねぇぞ。

おらの説明はこんな感じだ。chi-chiが晩飯のオカズ狩って来いってうるせぇからそろそろで行ってくっぞ。
おめぇももっと修行して天下一武道会でおらと握手だ。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/06/02 12:35

    そうなんよ笑
    でも、中にはmtsさんのように何回か世話になった方もいるわけでな、複雑だわ。
    それなりに修行か笑
    俺の何100倍と知識があるのだろうけど、それならそれを踏まえてナイスな回答して欲しいものだよな。

    キャンセル

  • 2019/06/02 12:41

    ここだけの話だけどな、おめぇの言ってる、

    > 質問者の立場から言うのもアレですが、
    > 普通に「openはこう言う意図で、概念によってつけられています」と書いて頂ければ良いのでは?
    > ちょっと冷たすぎやしませんかねぇ?

    は、おら、なんにも間違ってねぇと思うぞ。

    あいつらは鶴仙流だから心が歪んじまってるんだよ、きっと。

    キャンセル

  • 2019/06/02 12:49

    ありがとう。
    ただ、俺にも多少なりとも非があるわけで。
    相手の言い分もわからなくもない。
    ただ、一発目の回答ならまだしも、返信で直接的な回答を何度も問うてるのに、
    「非推奨質問」やら「キミのため」と言われると、「余計なお世話、ありがた迷惑」と思ってしまうのも事実。
    文章って難しいよな。対面ならそうはならんだろうに。

    それと、ごめん、ドラゴンボールネタわからんから鶴仙流と言われてもピンとこない笑

    キャンセル

check解決した方法

-5

他の質問サイトでの回答が一番わかりやすかった為、一応自己解決とします。
ちなみにその回答が下記です↓ (こう言う回答が欲しかった)

アコーディオンメニューのコーディングに関して、回答します。

①は、概ね合っています。

var $answer = $(this).find('.answer');

>$answerには、クリックした際にそのクリックイベントが起こった要素で、
その子要素の.answerを代入。

変数「 $answer」は、
「faq-list-item」クラス属性が付いた要素の配下における
「answer」クラス属性のHTMLコレクションです。

②の「 open は一体何者なんですか?」
また、
「この open は具体的に「何」でどう作用しているのでしょうか?」
について

テクニカルタームとしては、「フラグを立てる」という作業です。

具体的に言い換えると、
マラソンで折り返し地点に到達した時に、
「このランナーはここまで来たんだ」ということで、
マジックペンで手に色を付けられます。

何かの目印を付けないと、
折り返し地点に到達していないのに
引き返されても、まったくわかりませんからね。

それと同様のことをしている訳です。

HTMLのタグには、いろいろな属性が付けられます。

このアコーディオンメニューの場合は、
質問という「question」クラスの付いたH3タグをクリックしたら、
・その直下のSPANタグ内の記号を変える
・かつ、「answer」クラスの付いたDIVタグの表示属性を変える

そういう処理をしている訳ですね。

その際、H3タグのクリック時に、
回答のタグが開いているのか、閉じているのかわかりません。
そこで「open」というクラスを用意しています。

・そのクラス属性が在るなら、閉じる
その時は、「open」クラスを取ってしまう

・そのクラス属性が無いなら、開く。
開けた目印として、
「開けましたよ」という意味付けの「open」クラスを付けておく

そうした処理をしていることになります。

>試しにopenを適当な文字に置き換えても出来た

そうです。どんな文字でもいいんです。

ただ、モノを開けたら「オープン」と言うので、
便宜的に「open」という単語を使っているだけです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/06/02 19:43

    例にisopenと書いて悪かった、わざわざ例だって言ってるのにそこまで拘ると思わなかった
    openに似せた単語で状態を取得すると一目で分かるものを使いたかっただけ
    実際業務で書く時にはstatusとかconditionという単語を使うし、isopenは飽くまで例だと思ってください
    もしisopen使うならメソッドとしてこんな感じで使う
    https://www.ibm.com/support/knowledgecenter/ja/SSVRGU_9.0.1/reference/r_domino_Database_IsOpen.html

    キャンセル

  • 2019/06/02 19:46

    なんかおら、おめぇが一番可愛そうな奴に思えてきたぞ。

    キャンセル

  • 2019/06/02 20:27

    運営に言っとくけど、本件におらは一切関係ないからな?
    おらは、あたりめぇの事しかかいてねぇからな?
    おらにお鉢を回してこねぇでくれよ?

    キャンセル

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

  • ただいまの回答率 88.82%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る