Visual StudioからjQueryを使おうとするとUncaught ReferenceError: $ is not definedになる場合の確認ポイント

 Visual Studio 2019等でASP.NET MVCプロジェクトを作成すると、デフォルトでjQueryやBootstrapなどが含まれたプロジェクトが作成され、jQueryを最初から使うことができます。

ところが、実際jQueryのコードを追加してみると、

Uncaught ReferenceError: $ is not defined

なるエラーが表示され、jQueryが動作しません。

その際の確認ポイントをまとめておきます。

jQueryでTABLE内のラジオボタン選択行の背景色を変更するサンプル

最近jQueryを使う機会があり勉強中です。

本記事では、選択行の背景色を変えるjQueryのコードについてメモしておきます。


ソースコード例はこんな感じ。

 var $radioButton= $("input[name='aaaa']");
 $radioButton.click(function(){
  $radioButton.parents('table').find('td').css('background', 'white');
  $("input[name='aaaa']:checked").parent().parent().children().css('background', 'blue');
 });

基本的にはラジオボタンがクリックされると、まずテーブル全体のセルの背景色を塗りつぶして、変更前の行の色を元に戻してから、新たに選択された行の色を変更するというロジックです。

悩んだのがラジオボタンが存在するテーブルやテーブル列全体の背景色を変更する方法でした。単純にTABLEタグやTRタグの背景色を変更するだけでは上手くいかず、上記処理のようにTDタグ全体を取得したり、選択行についてはparentとchildrenを並べて対応しています。

もっとスマートな方法もあるかもしれませんが、参考になれば。