同じクラスを使用してリンクリストから値を取得

Question

リンクのリストがあり、これらのリンクには一意のデータ値= "1"またはデータ値= "2"またはそれ以外のものがあり、同じクラス= "create_post "

<a href="#" class="create_post" data-value="1">Link 1</a> 
<a href="#" class="create_post" data-value="2">Link 2</a> 
<a href="#" class="create_post" data-value="3">Link 3</a> 

リンクをクリックすると、JSスクリプトが実行されます。

$('.create_post').click(function(event){ 
    var com = $('.create_post').data('value');  
}); 

これは素晴らしいですが、comはリストの最初の値から "1"を返し、クリックされたリンクから戻っていません。

私は試しました$（this）.attr（ 'value'）;しかし、何も返されません。 私はid = "create_post"を使用しようとしましたが、同じ結果が得られました。

クリックされた実際のリンクからデータ値を取得するにはどうすればよいですか？

Answer 1

イベントを発生させた要素を参照するには、クリックハンドラ内でthisを使用する必要があります。現在のコードではコレクションからdata()を取得しています.1つの値しか返すことができないため、最初の要素から属性を取得します。

$('.create_post').click(function(event) { 
 
    var com = $(this).data('value'); 
 
    console.log(com); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" class="create_post" data-value="1">Link 1</a> 
 
<a href="#" class="create_post" data-value="2">Link 2</a> 
 
<a href="#" class="create_post" data-value="3">Link 3</a>

また

はそれがattr('data-value')あるべきなattr()の使用が機能しなかったことに注意してください、data()メソッドを使用して、より良い練習があることに留意すべきである：

これを試してみてください可能であれば。

Answer 2

イベントハンドラでは、thisを使用するだけです。

var com = $(this).data('value'); 

$('.create_post').click(function(event) { 
 
    var com = $(this).data('value'); 
 
    console.log(com); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" class="create_post" data-value="1">Link 1</a> 
 
<a href="#" class="create_post" data-value="2">Link 2</a> 
 
<a href="#" class="create_post" data-value="3">Link 3</a>

Answer 3

$('.create_post').click(function(event) { 
 
    var com = $(this).data('value'); 
 
    alert(com) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<a href="#" class="create_post" data-value="1">Link 1</a> 
 
<a href="#" class="create_post" data-value="2">Link 2</a> 
 
<a href="#" class="create_post" data-value="3">Link 3</a>

私たちはイベントを発生させた要素に対処するためにクリックハンドラ内thisを使用する必要があります。