前提・実現したいこと
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 · 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 © <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 © <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>
回答3件
あなたの回答
tips
プレビュー