クラスが動作しないjQuery

Question

私は、jQueryの入力をチェックしようとしているのと同じクラス名を持つ複数の要素を動的に生成しました。両方をクリックさせるのではなく、最初に生成された要素をクリックするだけです。

例：item_1をクリックしてitem_1 idを返しますが、item_2をクリックするとanytingは返されません。

HTML

<div id="item_1" class="resp"></div> 
    <div id="item_2" class="resp"></div> 

JS - jQueryの

$(".resp").on("click",() =>{ 
     var id = $(".resp").attr("id"); 
     console.log('attempting toggle' + id); 
    }); 

Answer 1

はまず、あなたは（コンテキストを見逃さないために）矢印の機能の代わりに正常な機能を使用する必要があります。第二に、thisキーワードを使用して、実際にクリックされた要素を参照します。

$(".resp").on("click", function() { 
 
    console.log('attempting toggle ' + this.id); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="item_1" class="resp">A</div> 
 
<div id="item_2" class="resp">B</div>

Answer 2

.attr('id')は、セット内の最初に一致した要素のid属性の値を返すためです。代わりに

、this値がクリックされたdiv要素に等しくなるように、そのidを取得し、その後、ハンドラの古い学校の機能を使用します。

$(".resp").on("click", function() { 
 
    var id = $(this).attr('id'); 
 
    console.log('attempting toggle ' + id); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="item_1" class="resp">First</div> 
 
<div id="item_2" class="resp">Second</div>

Answer 3

あなたはここにやっている何をされますidを取得するためにクラス名を参照します。これはあなたが望むものではない最初のクラス名のIDを集めます。あなたがする必要があるのは、IDを正しく取得するためにthisキーワードを使用することです。

ビットを矢印機能を削除し、内部のコードを変更した後、それは次のようになります。

$(".resp").on("click", function() { 
    var id = this.id; 
    console.log('attempting toggle: ' + id); 
}); 

はまた、あなたはjQueryのを正しくインストールされていることを確認します。 hereからJQuery埋め込みコードを取得してください。 JavaScriptコードより前には、JQueryコードを含めてください。