Q&A
回答ありがとうございます！ファイル名がmain.jsである事を記述しておりませんでした。申し訳ないです！
html
1コード<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 7 <title></title> 8 9 <link rel="stylesheet" href="style.css"> 10</head> 11<body> 12 13 14 <section> 15 16 <div class="sidebar"> 17 <h2>サポートページ</h2> 18 <div class="submenu"> 19 <h3>1.初めて使うとき</h3> 20 <ul class="hidden"> 21 <li><a href="#">-概要</a></li> 22 <li><a href="#">-インストールする</a></li> 23 <li><a href="#">-アカウントを登録する</a></li> 24 <li><a href="#">-アンインストールする</a></li> 25 </ul> 26 </div> 27 <div class="submenu"> 28 <h3>2.基本的な使い方</h3> 29 <ul class="hidden"> 30 <li><a href="#">-基本的な操作方法</a></li> 31 <li><a href="#">-元の状態に復元する</a></li> 32 <li><a href="#">-機能拡張プラグインを追加する</a></li> 33 </ul> 34 </div> 35 </div> 36 </section> 37 <script src="jquery-3.4.1.min.js" ></script><!-- script srcがmain.jsの方が先だと動かなかった --> 38 <script src="main.js" ></script> 39 40 41 42</body> 43</html>
css
1コード.hidden { 2 display:none; 3} 4.submenu ul { 5 margin-left:1em; 6 list-style:none; 7 font-size:14px; 8} 9.submenu h3 { 10 cursor:pointer; 11 color:#5e78c1; 12 margin-left:1em; 13} 14.submenu h3:hover { 15 color:#b04188; 16 text-decoration:underline; 17} 18
<script src ="main.js"> <script src="jquery-3.4.1.min.js"> とすると動きませんでした。この２つのscriptタグをoption矢印ボタンで逆にすると問題なく動きました。 原因が分かりません。教えて下さいjs
1コード'use strict'; 2 3{ 4 $(document).ready(function() { 5 $('.submenu h3').on('click', function() { 6 $(this).next().toggleClass('hidden'); 7 }); 8 }); 9} 10// main.js
回答2件
0
jqueryが読み込まれませんでした。
「jqueryが読み込まれませんでした」じゃなくて、「main.jsの中でjQueryが使えませんでした」の間違いでは？
読み込む前には使えません。
投稿2021/02/13 03:47
総合スコア85886
0
ベストアンサー
jquery-3.4.1.min.jsの中で$()が定義されているから。
エラー
js
1a(); 2const a = function(){console.log("a")} 3//ReferenceError
実行される
js
1const a = function(){console.log("a")} 2a();
投稿2021/02/13 04:05
編集2021/02/13 04:10
総合スコア80875
その「記述していなかった内容」とこの回答は関連性はないです。
関連性というか影響。
私の回答は「原因」に対する回答です。
納得できなかったということでしょうか？
回答をどう理解したのか教えてください。
jquery-3.4.1.min.jsのファイル中で$()を記述しているからと解釈しました。ファイル名はmain.jsなので補足に入れました。誤解していたようです..
なるほど、伝わってないですね。
「記述しているから」ではないです。
「定義されているから」
定義されてない段階で使おうとしているから使えない（エラーとなる）です。
物凄く簡易なサンプルコードも提示したのですが、そこまで読まれてないのでしょうか。
jquery-3.4.1.min.jsのコード内を読んでみることも重要です。minifyだと読みづらいので、そこはjquery-3.4.1.jsを取得してきて読むと良いでしょう。
ところで、まだ何か疑問があるのですか？
ありがとうございます。サンプルコードは読みました。定義していなかったからjQueryが使えなかった動かなかったという意味と現在解釈してます。
htmlにてscriptタグにmain.js jquery-3.4.1.min.jsの順で読み込むと実際動きませんでした。ということはこの順では定義されなかったということになります。この２つのscriptタグが逆だと使える状態にななったということは、定義がなされたという事なのでしょうか？ ごめんなさい混乱しております
自身で質問に書かれていますね。
>逆にすると問題なく動きました。
外部ファイルと言っても、読み込みの記述をした場所にコードが入るのとイコールです。
ありがとうございます。理解しました！jquery-3.4.1.min.jsを先に読み込んでいなかったということはまだ定義されていない状態。最初にmain.js次に定義（jquery-3.4.1.min.js）では、動きませんという事ですね！
はい。ただ、結局otnさんの回答の通りです。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/02/13 06:55
2021/02/13 06:59
2021/02/13 07:27 編集
2021/02/13 08:40
2021/02/13 09:22
2021/02/13 09:24