JQuery addClassが機能しない

Question

divを表示および非表示にするコードがあり、divが開いたり閉じたりすると、不透明度と色が変更されます。要素に直接CSSを追加するためにJQueryの.css（）を使用する代わりに、addClassを使用したいと思いますが、なぜ下のコードが動作しないのかわかりません。

私はビルドを実行すると、'ReferenceError：$ is not defined'というメッセージが表示されます。私はそれがどういう意味かわからない。助けてください。

jQueryの

$(document).ready(function() { 
    $(".upload-panel-container").click(function(e) { 
     $(".upload-menu-container").toggleClass("open").slideToggle(100, "linear"); 
     if ($(".upload-menu-container").hasClass("open")) { 
      $(".upload-panel-container").addClass("setOpacityto1"); 
     } else { 
      $(".upload-panel-container").addClass("setOpacityto85"); 
     } 
    }); 

}); 

CSS

.setopacityto1 { 
    opacity: 1; 
    color: red; 
} 

.setopacityto85{ 
    opacity: .85; 
    color: blue; 
} 

Answer 1

"$が定義されていない" 通常のjQueryは正しくページにロードされていないことを意味します。だから$（jQueryの構文）は認識されません

更新：私はそれを修正しました。クラス名では大文字と小文字が区別されますので、CSSとJSで同じ名前を使用してください。変更が必要なクラスだけでなく、それらを削除する必要があります。それ以外の場合は、クリックするたびにクラスが再度追加され、両方のクラスが要素に追加された状態になります。 （要素を調べて何を意味するのかを確認してください）

$(document).ready(function() { 
    $(".upload-panel-container").click(function() { 
     $(".upload-menu-container").toggleClass("open").slideToggle(100, "linear"); 
     if ($(".upload-menu-container").hasClass("open")) { 
      $(".upload-panel-container").addClass("setopacityto1"); 
      $(".upload-panel-container").removeClass("setopacityto85"); 
     } else { 
      $(".upload-panel-container").addClass("setopacityto85"); 
      $(".upload-panel-container").removeClass("setopacityto1"); 
     } 
    }); 

});