今回の事象

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はこのように記述しなければいけないようです。勉強になりました。