从使用同一类别的链接列表中获取价值

Question

我有一个链接列表，这些链接有一个唯一的data-value =“1”或data-value =“2”或其他的和相同的class =“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()，并且因为它只能返回一个值，所以它仅从第一个元素获取属性。

试试这个：

$('.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()使用没有工作，因为它应该是attr('data-value')，但应注意的是，使用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单击处理程序内解决引发该事件的元素。