HTML内に書いたjQueryが動かない

今回の事象

Java Scriptの記述は基本的に外部ファイル化して開発することが多いと思いますが、テスト的にJava Scriptを動かしたい場合など、HTMLファイル内に直接Java Scriptの記述をすることがあります。

今回、なぜかこのパターンでJava Scriptが動作しなかったので解決法を調べました。

jQueryを読み込ませる

これは通常通りですが、タグの直前でjQueryを読み込ませます。


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>

jQueryの記述をする

jQuery本体を読み込ませた後にタグ内に以下の記述をしました。


function() {
    var trigger = $('.js-accordion-trigger');  // triggerを定義
    trigger.on('click', function(){ // triggerがクリックされた時
      if($(this).hasClass('is-open')) { // その要素がis-openクラスを持っていれば
        $(this).removeClass('is-open'); //is-openクラスを外す
      } else {                // is-openクラスを持っていなければ
        $(this).addClass('is-open');  // is-openクラスを付ける
      }
    })
  } 

条件的にはこれでjQueryが問題なく動くはずなのですがなぜか動きません。要素をクリックした時に、要素にクラスを付与するといったような簡単なものですが、デベロッパーツールを確認してもクラスがつきませんでした。

解決法


 (function($){ // ここを変更($を追加)
    var trigger = $('.js-accordion-trigger');
    trigger.on('click', function(){
      if($(this).hasClass('is-open')) {
        $(this).removeClass('is-open');
      } else {
        $(this).addClass('is-open');
      }
    })
 }(jQuery));  // ここを変更

上記、太字部分を追記しました。これだけで、デベロッパーツール上で、クラスが付け外しされることを確認することができました。

本来jQueryはこのように記述しなければいけないようです。勉強になりました。

参考にした記事

ちなみに私が今回助けてもらった記事はこれです。ありがとうございました。

jQueryが動かない(動作しない)理由を考察!

related article

2019/11/15 JavaScript

slick.jsをwebpackで使いこなす

2019/11/15 JavaScript

Youtubeをポップアップで再生させる方法

2019/12/10 JavaScript

slickで現在のページ数 / 総ページ数を表示させる

2019/10/15 JavaScript

スマホで背景スクロールを禁止にする