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

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

新規登録して質問してみよう
ただいま回答率
85.50%
ファイル

ファイルとは、文字列に基づいた名前又はパスからアクセスすることができる、任意の情報のブロック又は情報を格納するためのリソースです。

jQuery

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

Q&A

解決済

2回答

423閲覧

jQueryの外部ファイル化ができない

augsup

総合スコア7

ファイル

ファイルとは、文字列に基づいた名前又はパスからアクセスすることができる、任意の情報のブロック又は情報を格納するためのリソースです。

jQuery

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

0グッド

0クリップ

投稿2020/07/31 04:32

CDNを使ったjQueryの外部ファイル化をしたいのですが何故かjQueryが動作しません。
下記にコードを載せておくので何故動作しないのか教えていただきたいです。
よろしくお願いします。

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 <link rel="stylesheet" href="css/stylesheet.css"> 7 <title>Document</title> 8 9 <!-- リセットcss --> 10 <link href="https://unpkg.com/sanitize.css" rel="stylesheet" /> 11 12 <!-- fontawesomeを使うためのコード --> 13 <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> 14 15 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 16 <link rel="stylesheet" href="jquery/stylesheet.js"> 17 18 19</head> 20<body> 21 <main> 22  <div> 23 <button class="fadeout">fadeout</button> 24 </div> 25 <div class="box">box</div> 26 </main> 27</body>

scss

1.box{ 2 width: 200px; 3 height: 200px; 4 background-color: #fcc; 5 padding: 10px; 6 }

javascript

1$('.fadeout').on('click',function(){ 2 $('.box').fadeToggle(); 3})

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2020/07/31 04:43

JavaScript のコードはどこにあるのですか?
augsup

2020/07/31 05:11

javascriptのファイルの中にjqueryを記述しています。
退会済みユーザー

退会済みユーザー

2020/07/31 05:38 編集

> javascriptのファイルの中にjqueryを記述しています。 意味不明です。<link rel="stylesheet" href="jquery/stylesheet.js"> のこと? であれば、それでは動くはずはないです。
augsup

2020/07/31 05:50

jqueryを外部ファイル化する時は通常jsファイルに記述していくのではないのでしょうか?
退会済みユーザー

退会済みユーザー

2020/07/31 06:59 編集

<link rel="stylesheet" href="jquery/stylesheet.js"> ではダメなことと、html 要素とスクリプトの順番の問題についてはすでに web11 さんが回答されてますよね。質問者さんもその回答に納得したのでは? <link rel="stylesheet" href="jquery/stylesheet.js"> を正しく <script src="jquery/stylesheet.js"></script> と書き直してもダメなのはわかりますか?(パスは間違ってないという前提で) その時点で、ブラウザが stylesheet.js を読んでその中にある $('.fadeout').on('click',function(){ ... を解析しようとしても、$('.fadeout') の中の .fadeout クラスを付与された html 要素はまだは存在しないのでダメと言うことは分かりますか? その問題を解決するために $(function(){ ... }); で囲う意味は分かりますか?
guest

回答2

0

ベストアンサー

html

1<link rel="stylesheet" href="jquery/stylesheet.js"> 2<script src="jquery/stylesheet.js"></script>

js

1$(function(){ 2$('.fadeout').on('click',function(){ 3 $('.box').fadeToggle(); 4}); 5});

stylesheet.jsがlink読み込みになっているのでスクリプトタグで読み込めば動くかと思います。

投稿2020/07/31 05:19

web11

総合スコア52

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

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

augsup

2020/07/31 05:39

ご回答ありがとうございます。 link読み込みではなくscriptタグを使うのですね! 指示どうりにしてみると無事、jqueryが作動しました!! また少し質問なのですが私の書いたjqueryのコードには下記のコードを記載していませんでしたが、このコードを書くこともjqueryを動作させるのに必要な手順だったようです。これはどのような意味を持っているのでしょうか? --code-- $(function(){ });
web11

2020/07/31 05:56 編集

```javascript $(function(){ }); ``` htmlのコードというのは上から順番に処理されていくためjsを読み込む段階では、まだhtmlが存在しないため処理ができなくなります。(.fadeoutのbutton等) そのため上記コードの中に処理を書くとhtmlのタグを読み終わった上で処理を開始するというコードになるため正常に動作するようになります。
web11

2020/07/31 05:59 編集

また、bodyの閉じタグ直前にjsを書けばhtmlが読み終わった後に必ず処理されるようにはなりますが、その場合でも「$(function(){});」の中に書いたほうが安全です。 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="jquery/stylesheet.js"></script> </body>
augsup

2020/07/31 06:00

htmlを読み込んだのちにjqueryの処理を行うという意味なのですね。理解できました。 また安全のため毎回記述しようと思います。 ご回答ありがとうございました。
guest

0

イベントを拾うのをdocument.ready内にするか、jsファイル読みこみを/body直前にするかにして、対象要素の読みこみを待ってから要素を操作してください。
※jQuery特有の問題ではありません

投稿2020/07/31 04:37

m.ts10806

総合スコア80765

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

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

augsup

2020/07/31 05:10

ご回答ありがとうございます。 どちらも試しましたがやはりjqueryが動きません。
m.ts10806

2020/07/31 05:30

こちらの意図どおりの対応がされたか不明です。 質問本文に追記してください。 あともう少しデバッグされては。 ・stylesheet.jsは読み込まれているか ・.fadeoutは.js読み込み時点で参照できているか ・onclickはとれているか 各所にconsole.log仕込めばすぐに結果は出ます。
augsup

2020/07/31 05:44

ベストアンサーの通りstylesheet.jsをlink読み込みしていたのが間違いだったようです。 ご回答ありがとうございました。
m.ts10806

2020/07/31 05:57

デバッグすれば気づけたことかとも思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問