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

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

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

Windowsは、マイクロソフト社が開発したオペレーティングシステムです。当初は、MS-DOSに変わるOSとして開発されました。 GUIを採用し、主にインテル系のCPUを搭載したコンピューターで動作します。Windows系OSのシェアは、90%を超えるといわれています。 パソコン用以外に、POSシステムやスマートフォンなどの携帯端末用、サーバ用のOSもあります。

jQuery

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

Brackets

Bracketsは、オープンソースで開発されているHTML/CSS/JavaScriptのコードエディターです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

1478閲覧

jQuaryが動作しません

mitrasi

総合スコア49

Windows

Windowsは、マイクロソフト社が開発したオペレーティングシステムです。当初は、MS-DOSに変わるOSとして開発されました。 GUIを採用し、主にインテル系のCPUを搭載したコンピューターで動作します。Windows系OSのシェアは、90%を超えるといわれています。 パソコン用以外に、POSシステムやスマートフォンなどの携帯端末用、サーバ用のOSもあります。

jQuery

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

Brackets

Bracketsは、オープンソースで開発されているHTML/CSS/JavaScriptのコードエディターです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/02/26 07:33

編集2021/02/26 08:27

前提・実現したいこと

jQuaryが実行されません。
エディタ上でのエラーが出ているわけではないですが、動作しません。

ご教授よろしくお願いいたします。

該当のソースコード

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <title>Chapter 04-01 &#xB7; jQuery 最高の教科書</title> 8 <link rel="stylesheet" href="./css/normalize.css"> 9 <link rel="stylesheet" href="./css/main.css"> 10 11 <script src="./js/vendor/jquery-1.10.2.min.js"></script> 12 <script src="./js/vendor/jquery-ui-1.10.3.custom.min.js"></script> 13 <script src="./js/main.js"></script> 14</head> 15 16<body> 17 18 <header class="page-header" role="banner"> 19 <h1>Creative jQuery Sample</h1> 20 </header> 21 22 <div class="page-main" role="main"> 23 24 <div id="buttons1"> 25 <h2>BUTTONS1</h2> 26 <div class="inner clearfix"> 27 <button>Albatross</button> 28 <button>Bishop</button> 29 <button>Canary</button> 30 <button>Duck</button> 31 <button>Eagle</button> 32 <button>Falcon</button> 33 <button>Goose</button> 34 <button>Hawk</button> 35 <button>Ibis<span class="bg"><span>Ibis</span></span></button> 36 <button>Jaeger<span class="bg"><span>Jaeger</span></span></button> 37 <button>Kingfisher<span class="bg"><span>Kingfisher</span></span></button> 38 <button>Lark<span class="bg"><span>Lark</span></span></button> 39 </div> 40 </div> 41 42 </div> 43 44 <footer class="page-footer" role="contentinfo"> 45 <small class="copyright">COPYRIGHT &copy; <a href="http://www.shiftbrain.co.jp" target="_blank">SHIFTBRAIN Inc.</a></small> 46 </footer> 47 48</body> 49 50</html> 51 52

該当のソースコード

js

1 2$(function () { 3 4 var duration = 300; 5 6 // buttons1 ---------------------------------------- 7 // buttons1 1行目 8 $('#buttons1 button:nth-child(-n+4)') 9 .on('mouseover', function () { 10 $(this).stop(true).animate({ 11 backgroundColor: '#ae5e9b', 12 color: '#fff' 13 }, duration); 14 }) 15 .on('mouseout', function () { 16 $(this).stop(true).animate({ 17 backgroundColor: '#fff', 18 color: '#ebc000' 19 }, duration); 20 }); 21 // buttons1 ---------------------------------------- 22 // buttons1 2行目 23 $('#buttons1 button:nth-child(n+5):nth-child(-n+8)') 24 .on('mouseover', function () { 25 $(this).stop(true).animate({ 26 borderWidth: '12px', 27 color: '#ae5e9b' 28 }, duration, 'easeOutSine'); 29 }) 30 .on('mouseout', function () { 31 $(this).stop(true).animate({ 32 borderWidth: '0px', 33 color: '#ebc000' 34 }, duration, 'easeOutSine'); 35 }); 36 37 38 // buttons1 ---------------------------- 39 -- -- -- -- -- -- 40 // buttons1 3行目 41 $('#buttons1 button:nth-child(n+9)') 42 .on('mouseenter', function () { 43 $(this).find('> span').stop(true).animate({ 44 width: '100%' 45 }, duration, 'easeOutQuad'); 46 }) 47 .on('mouseleave', function () { 48 $(this).find('> span').stop(true).animate({ 49 width: '0%' 50 }, duration, 'easeOutQuad'); 51 }); 52 53}); 54 55

試したこと

①差分チェックサイトにて差分の比較
→教材データ元では「mouseover」となっているが、テキストでは「mouseenter」となっているためそこで差分は出たがあとは特になし。
※比較対象は教材データダウンロードの初期状態です。

②自分の目でも再度チェック
→やはり特に間違いを認識できません。

③該当箇所のjsをとりのぞく
→正常に動作します。(のちに再度確認したら動きませんでした????)

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

OS:Windows
エディタ:Brackets
ブラウザ:クローム

追加情報

◆該当jsを含めて開発ツールのコンソールエラーを見た結果
→Uncaught SyntaxError: Invalid left-hand side expression in prefix operation が表示されました

◆該当jsをとりのぞいて開発ツールのコンソールエラーを見た結果
→main.js:42 Uncaught SyntaxError: Unexpected token '}' が表示されました

###追加情報
以下のように修正したところ、エラーが発生しました。
Uncaught SyntaxError: Invalid left-hand side expression in prefix operation が表示されました

html

1<footer class="page-footer" role="contentinfo"> 2 <small class="copyright">COPYRIGHT &copy; <a href="http://www.shiftbrain.co.jp" target="_blank">SHIFTBRAIN Inc.</a></small> 3 </footer> 4 <script src="./js/vendor/jquery-1.10.2.min.js"></script> 5 <script src="./js/vendor/jquery-ui-1.10.3.custom.min.js"></script> 6 <script src="./js/main.js"></script> 7</body>

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

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

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

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

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

plasticgrammer

2021/02/26 07:38

jQueryはどのように読み込んでいますか? 読み込み部分も含めてのソースを記載してください。
mitrasi

2021/02/26 07:44

掲示致しました。 どうぞよろしくお願い致します。
int32_t

2021/02/26 07:56

ブラウザの開発者ツールのコンソールにエラーが出ていないか確認しましたか?
mitrasi

2021/02/26 08:06

>hoshi-takanori様 ご指摘ありがとうございます。修正いたしました。 >int32_t様 ご指摘ありがとうございます。確認した見たところエラーが見られました。詳細は質問部に追記しております。
guest

回答3

0

普通にコピペしただけでも「duration」が宣言されていないというエラーがでます

投稿2021/02/26 07:41

yambejp

総合スコア114572

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

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

mitrasi

2021/02/26 07:44 編集

ご回答ありがとうございます!どのようなエラーかわかりかねますが、Bracketsユーザーであれば以前の私と同じ状況が考えられるかと思います。 https://teratail.com/questions/324553 ただ、上記の処理を行ったせいか、私のほうではエラーは確認できませんでした????
yambejp

2021/02/26 07:52

firefoxだといきなりエラー、chromeでもIbis移行のボタンにマウスを合わすとエラーになりますが・・・
mitrasi

2021/02/26 08:08 編集

ご指摘ありがとうございます。 質問をかくときは確かに動作していたのですが、今確認すると動きませんでした。詳細は質問部に追記しております。 (一旦閉じて開きなおしたからでしょうか…????)
yambejp

2021/02/26 08:12

いずれにしろ、エラーの原因となるdurationはなんなのか はっきりしたほうがよいでしょう。 書かれたソースが全てであれば、あきらかにおかしい箇所です
mitrasi

2021/02/26 08:13

jsのほうは一部抜粋であり、全文ではありません。
yambejp

2021/02/26 08:14

では抜粋した部分だけでエラーがでないことを確認した ソースを提示ください
mitrasi

2021/02/26 08:15

掲示致しました。 よろしくお願いいたします
guest

0

自己解決

こんにちは。
おかげさまで無事解決致しましたので、ご報告致します。

エディタ上でのエラーは見つけられなかったため、ディベロッパーツールのエラー箇所を参照したところ
以下の箇所が発覚したのでそこを修正したらすべて効くようになりました。

js

1// buttons1 ---------------------------- 2 -- -- -- -- -- --  /*この行を削除*/ 3 // buttons1 3行目 4 $('#buttons1 button:nth-child(n+9)') 5 .on('mouseenter', function () { 6 $(this).find('> span').stop(true).animate({ 7 width: '100%' 8 }, duration, 'easeOutQuad'); 9 }) 10 .on('mouseleave', function () { 11 $(this).find('> span').stop(true).animate({ 12 width: '0%' 13 }, duration, 'easeOutQuad'); 14 }); 15 16});

皆様ご協力ありがとうございました!

投稿2021/02/27 05:33

mitrasi

総合スコア49

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

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

0

どのように動作確認されようとしているのかわかりませんが、scriptタグ一式を</body>の前に持ってくるか、

js

1$(function(){ 2 3});

の中にonのようなイベント付与を入れるかして、「対象の要素が読み込まれてから」実行するように考慮してみてください。

投稿2021/02/26 08:08

m.ts10806

総合スコア80765

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

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

mitrasi

2021/02/26 08:17

ご回答ありがとうございます! </body>タグの前に<script>移動してみましたが依然として変化がありません???? 該当箇所のみのエラーではないとのことなので、再度jsのコード全体を掲示致しました。 お手隙の際にご確認いただければ幸いです。
m.ts10806

2021/02/26 08:20

一部だったんですね 私の回答が無駄になりました。まあ珍しくはないですけど
m.ts10806

2021/02/26 08:21

というか最初の「エラーは出てない」前提はなんだったのでしょうか…
mitrasi

2021/02/26 08:24

申し訳ありません???? 確かに質問する前には、「該当箇所」を除けば問題なく動作していたので、その箇所が問題の箇所だと認識しており、簡潔に質問するため省いておりました。
m.ts10806

2021/03/04 07:59 編集

多少長くても省略することで本質が見えなくなるので一通り提示してもらったほうが助かりますよ。 コピペで現象再現できないと的確なアドバイスにはなりませんし、解決まで人も時間もかかるだけです。
mitrasi

2021/02/26 08:32

かしこまりました。 以後そのように致します。 ご迷惑お掛け致しました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問