jQuery：Uncaught TypeError：$（...）。clickは関数ではありません。

Question

どこが間違っているのかわかりません。別のものがクリックされたときに特定のdivを隠すだけです。ここに私のjQueryを（.htmlのファイルの一番下に置かれた）である：

<script> 
    $(document).ready(function() { 
     $(".card__container--closed").click(function() { 
      $(".hide__overlay").hide(); 
     }); 
    }); 
</script> 

<div class="hide__overlay"> 
    <p class="card__subtitle overlay card-overlay">NEWS</p> 
</div> 
<div id="card" class="card"> 
    ...some SVG image thing here... 
</div> 

しかし、私は次のエラーを取得しています何らかの理由：

Uncaught TypeError: $(...).click is not a function 
    at HTMLDocument.<anonymous> 

私はjQuery 3.2.1を使用しています。..

Answer 1

あなたの問題は、jQuery 3を使用していることが原因で、jQuery 2以降に多くのことが削除されていることが原因です。 jQuery 3.0以降の違いについては、jQuery 3.0 Upgrade Guideをご覧ください。

まず、$(document).ready()は必要ありません。それはちょうどに長い時間前に簡素化されています：彼らは冗長だ以来のjQueryの新しいバージョンで

$(function() { 
    // your code 
}); 

は、click()のようなショートカットイベントメソッドは、推奨されなくなりました。最新バージョンでは完全に削除されています。

代わりに、すべてのイベントリスナーの設定に.on()を使用する必要があります。

$(".card__container--closed").on('click', function() { 
    // ... 
}); 

UPDATE：あなたは.hide()メソッドから同じTypeError Sを抱えているコメントで言及しました。これはjQuery 3でも削除されたのは、人々のスタイルシートでうまく動作しなかったためです。代わりに、addClass(),removeClass()およびtoggleClass()を使用して、独自の表示/非表示クラスを要素に追加できます。あなたは、あなたのスタイルシートでそれらのクラスをスタイルして、表示と隠蔽の仕方を完全に制御できるようにします。

さらに、jQuery 3.0 Upgrade Guideを読んでください。すべての問題はjQuery 3にはもうない古い方法に基づいているためです。

Answer 2

は、これが最初のハードルを越えて私を得たこと

$(document).ready(function() { 
    $(document).on('click',".card__container--closed",function() { 
    $(document).find(".hide__overlay").css('display','none'); 
    }); 
});