Javascript - なぜ最初のdivが最初のdivにのみ発生し、2番目のdivには発生しませんか？

Question

私はjavascriptを実際には知っていませんが、1つの魔女の作品を撮っていますが、すべてのページの最初のdivで1回しか動作しません。

このフィドルを見てください。 [https://jsfiddle.net/Lr0g8snL/1/]

<div id="div4">jQuery Click to Toggle</div> 

jQueryの

を切り替えるをクリックします私あなたが最初のdivをクリックして、それがオン/オフ背景を切り替えます。

私は＃div4 "jQuery Click to Toggle"を2回追加しました。これは最初のものでのみ機能します。

＃div4と呼ばれるすべてのdivでどのように動作するのですか？

ありがとうございました！

Answer 1

各要素には一意のIDが必要です。代わりにクラスセレクタを使用するか、異なるIDsを与えてからそれらを選択してください。

<div class="div4">jQuery Click to Toggle</div> 

$(".div4").on("click", function() { 
    $(this).toggleClass('back-red'); 
}); 

はfiddle