Question

我在TWIG中使用循环返回锚点列表：

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

最终目标是在锚点上使用AJAX / jquery onclick在div中加载一些信息

$(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;

   });
  });

问题是即使锚点显示正确（具有不同的data-post-id值），警报总是在不同的锚点上返回相同的值。我真的不明白问题来自哪里，即使经过几个小时的思考，你的帮助也会受到赞赏。

Answer 1

您必须解决所点击的确切元素，而不是：

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

写：

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

那应该解决它。

Answer 2

试试这个：

由于您的所有<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 3

你再次使用选择器，它选择第一个匹配（第一个ID），而不是选择器的实例，如下所示：

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

Answer 4

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

它没有得到你点击的锚点，你需要从e

给出值

应该是

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

JQuery变量总是具有相同的值

4 个答案: