プロゲートjQuery 学習コース中級編 コードは違うが動きは同じに思ます。

Question

前提・実現したいこと

書き方は違うが動きは同じです。自分のコードは問題ないのか教えていただきたいです。

ここに質問の内容を詳しく書いてください。
プロゲートjQuery 中級編を練習しています。
アイコンをhover したら下にテキストが出て、離したら消える部分です。
プロゲートではａｄｄｃｌａｓｓとｒｅｍｏｖｅｃｌａｓｓを使うようになっています。
自分が思う書き方を試してみたら動きは同じに思えたのですが、
考え方として合っているのかがわからないです。
よろしくお願いいたします。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

●HTML
<div class="lessons">
<div class="lesson lesson-hover">
<div class="lesson-icon">
<img src="https://prog-8.com/images/html/advanced/html.png">
<p>HTML & CSS</p>
</div>
<p class="text-contents">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>
</div>
<div class="lesson lesson-hover">
<div class="lesson-icon">
<img src="https://prog-8.com/images/html/advanced/jQuery.png">
<p>jQuery</p>
</div>
<p class="text-contents">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</p>
</div>
<div class="lesson lesson-hover">
<div class="lesson-icon">
<img src="https://prog-8.com/images/html/advanced/ruby.png">
<p>Ruby</p>
</div>
<p class="text-contents">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p>
</div>
<div class="lesson lesson-hover">
<div class="lesson-icon">
<img src="https://prog-8.com/images/html/advanced/php.png">
<p>PHP</p>
</div>
<p class="text-contents">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p>
</div>
</div>
</div>

</div> ```ここに言語名を入力 ●自分のコード ソースコード $('.lesson-hover').hover( function() { // 子要素の「.text-contents」の要素を取得し、text-activeクラスをつけてください $(this).find('.text-contents').show(); }, function() { // 子要素の「.text-contents」の要素を取得し、text-activeクラスを外してください $(this).find('.text-contents').hide(); } );

答えのコード
$('.lesson-hover').hover(
function() {
// 子要素の「.text-contents」の要素を取得し、text-activeクラスをつけてください
$(this).find('.text-contents').addClass('text-active');
},
function() {
// 子要素の「.text-contents」の要素を取得し、text-activeクラスを外してください
$(this).find('.text-contents').removeClass('text-active');
}
);

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください

Comments

[m.ts10806]

コードはマークダウンのcode機能を利用してご提示ください。
また、もっとゴールを教えてください。
チェックを通ることなのか、要件を満たすことなのか。(現時点ではいずれも満たしてないのでは天職)

[Daregada]

少なくとも、CSSのtext-activeクラスのスタイルを提示しないと、「実際には同じことをしている」のかさえ判断できません。

[bbtdp027]

ご回答ありがとうございます。コードの載せ方が間違ってましたね、申し訳ないです。
CSSは
.text-active{ display:block;
です。
ゴールは要件を満たしているかで伺いたいです。プロゲートのチェックは通らなくてもよいです。

[m.ts10806]

質問は編集できますので。
ただ「要件」は結局「プロゲート側の指示」なので、チェック通るのが前提になるようにも思います。

[bbtdp027]

質問の編集できるんですね。すみません。指示に従うのが大事ですね。ありがとうございました！

[m.ts10806]

マークダウンだけは今からでも対応してください。「今度」だといつくるかわからないし必ず忘れます。

Answer 1

単純に、text-activeクラスをつける/外すと表示非表示を切り替えるは異なるものでは？

Answer 2

子要素の「.text-contents」の要素を取得し、text-activeクラスをつけてください

「自分の書いたコード」は、その指示に従っていないです。

Comments

[maisumakun]

> 考え方として合っているのかがわからないです。

text-activeのCSSの中身が違った場合、同じ動作になりません。

[bbtdp027]

.text-active{display:block;
です。

[maisumakun]

> ゴールは要件を満たしているかで伺いたいです。

満たすべき「要件」は何でしょうか？

[bbtdp027]

要件は動きが同じになること。だけを考えていました。
しかし、もう一点うかがえるなら一般的には答えの書き方がよいですか？

[maisumakun]

> 要件は動きが同じになること。だけを考えていました。

「動きが同じ」とは、いま同じであればそれでいいのでしょうか？それとも、「CSSでスタイルを制御できる」ことまで含めて考えるものでしょうか？

なお、一般には、スタイル指定は全部CSSに寄せたほうが良い書き方です。

[momon-ga]

要件が動きが同じになること・・・でも、
// 子要素の「.text-contents」の要素を取得し、text-activeクラスをつけてください
$(this).find('.text-contents').show();
というコードは、誰が見てもおかしいと思いますよ。
※”子要素の「.text-contents」の要素を取得し、text-activeクラスをつけてください”のコメントがなくてはじめて要件次第では？となるのが普通

[bbtdp027]

動きが同じっぽければいいわけではないんですね。たしかにコメントを無視してますもんね。了解いたしました。
みなさんありがとうございました！