переменная JQuery всегда иметь одинаковое значение

Question

Я возвращаю список якорей с помощью цикла в Twig:

{% for entity in entities %} 
<a href="javascript:void(0);" class="show_post_anchor" data-post-id="{{ entity.id }}">{{ entity.id }}</a> 
{% endfor %} 

Конечной целью является, чтобы загрузить информацию в DIV с помощью AJAX/JQuery OnClick на якорь

$(document).ready(function() { 

    $('a.show_post_anchor').click(function(e){ 

     var id= $("a.show_post_anchor").attr("data-post-id"); 
     alert(id); 


     e.preventDefault(); 
     return false; 

    }); 
    }); 

Проблема заключается в том, что предупреждение всегда возвращает одно и то же значение onclick на разных якорях, даже если якоря отображаются корректно (с разными значениями данных после ввода). Я действительно не понимаю, где проблема возникает даже после нескольких часов размышлений, ваша помощь приветствуется.

Answer 1

Попробуйте это:

Как ваши все <a> теги имеют .show_post_anchor класс и вы использовали $('a.show_post_anchor') так в DOM будет искать класс .show_post_anchor сначала он получит только первое значение, и $(this) представляет текущий щелкнул объект ,

$('a.show_post_anchor').click(function(e){ 
     var id= $(this).attr("data-post-id"); 
     alert(id); 
     e.preventDefault(); 
     return false; 
    }); 

Demo

Answer 2

Вам придется обратиться точный элемент, который был щелкнул, поэтому вместо того, чтобы:

var id= $("a.show_post_anchor").attr("data-post-id"); 

пишут:

var id= $(this).attr("data-post-id"); 

Это должно решить.

Answer 3

Вы используете селектор снова, который выбирает первый матч (первый ID), а не экземпляр селектора, как это:

var id= $(this).attr("data-post-id"); 

Answer 4

var id= $("a.show_post_anchor").attr("data-post-id"); 

это не получает то, что якорный ваш являются щелчок, вы должны дать значение от й

должны быть

var id= $(this).attr("data-post-id");