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

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

ただいまの
回答率

87.92%

jQueryのエラーについて

受付中

回答 4

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 956

score 59

main.js:1 Uncaught ReferenceError: $ is not defined
at main.js:1
jqueryとつながりません。なぜでしょうか?

====================================html===========================================
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>

<body>

<main>
<div id="btn_box">
<button>ボタン1</button>
<button>ボタン1</button>
<button>ボタン2</button>
<button>ボタン2</button>
<button>ボタン3</button>
<button>ボタン3</button>
</div>
</main>

<script src="main.js"></script>

</body>
</html>

====================================jQuery===========================================

$(function(){

var duration = 300;

$('button')
.on('mouseover', function() {
$(this).stop(true).animate({
backgroundColor: '#ae5e9b',
color: '#fff'
}, duration);
})
.on('mouseout', function(){
$(this).stop(true).animate({
backgroundColor: '#fff',
color: '#ebc000'
}, duration);
});

});

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 4

+2

jqueryとつながりません。

jQuery本体を読み込んでいない、のではないでしょうか。

<!-- </head>の直前あたりに入れるのがいいかと(main.jsの読み込みより先にする) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/04/30 17:00

    ありがとうございます。つながりはしましたが、動作ができません。
    どこかjqueryで記述ミスがあるのでしょうか?

    キャンセル

  • 2019/04/30 17:31 編集

    残念ながら、$().animateはデフォルトでは色のアニメーションに対応していません。

    http://api.jquery.com/animate/

    jQuery.color(https://github.com/jquery/jquery-color)というプラグインを入れれば対応するとのことですが、使ったことがないので使い勝手などはちょっとコメントできないです。

    キャンセル

  • 2019/04/30 17:37

    ありがとうございます。
    どうすれば動くのでしょうか・・・・?

    キャンセル

+1

jQuery本体のjsファイル読み込みがされていません。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/04/30 17:15

    コードはマークダウンのcode機能を利用してご提示ください。
    https://teratail.com/help#about-markdown

    キャンセル

  • 2019/04/30 17:18

    利用にまだ慣れていないもので、よくわかりません。
    申し訳ありません。

    質問本文のコードはそのままのコードですが、それではダメなのでしょうか?

    キャンセル

  • 2019/04/30 18:51

    はい。インデントなどが反映されていないので生のコードではありませんので再現確認が正しく行えませんし、teratailではコードの提示はマークダウンが推奨されています。
    maisumakunさんの回答のコード部分ですね。
    難しければコード部分を選択して<code>ボタンを押してください。

    キャンセル

0

jQuery.Colorプラグインが必要です。
下記のjquery-ui.min.jsを読み込めば解決します。

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

background-color cannot be, unless the jQuery.Color plugin is used
(jQuery.Colorプラグインを使用しない限り、background-colorは使用できません。)
https://api.jquery.com/animate/

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

jQueryのanimate()はCSSの値が数値的なものしかアニメーションにできません。ですので色をanimate()で変化させたい場合は、jQuery.Colorというプラグインが必要になります。

それを踏まえ、書き直したコードが以下です。これで意図したものになっていれば幸いです🌟*.(๓´͈ ˘ `͈๓).*

デモ(jsBin)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<link rel="stylesheet" href="main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script   src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"   integrity="sha256-H28SdxWrZ387Ldn0qogCzFiUDDxfPiNIyJX7BECQkDE="   crossorigin="anonymous"></script>

</head>

<body>

<main>
   <div id="btn_box">
      <button>ボタン1</button>
      <button>ボタン2</button>
      <button>ボタン3</button>
      <button>ボタン4</button>
      <button>ボタン5</button>
      <button>ボタン6</button>
   </div>
</main>

<script>// main.js

"use strict"; // エラーを厳密にキャッチしてくれるので(他にも理由ありますが今は気にしなくてOK)、
              // 必ず書くようにして下さい。ES5から導入され、不慮のエラーが起きない為にも、現在は
              // 書く事が慣習です。

$(function(){

   var _ = console.log, // console.logと毎回書くの面倒なので割当すると、以後の呼び出しが楽🙆‍♀️
   duration = 300;

   // `mouseover` Event
   $('button').on('mouseover', function() {
      $(this).animate({
         backgroundColor: '#ae5e9b',
         color: '#fff'
      }, duration);
   })

   // `mouseout` Event
   $('button').on('mouseout', function(){
      $(this).animate({
         backgroundColor: '#fff',
         color: '#ebc000'
      }, duration);
   });

});

</script>

</body>
</html>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 87.92%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る