有没有办法将python (django)变量放入jquery onmouseover弹出窗口？

Question

当有人滚动图片时，我正在尝试为我的网站创建弹出窗口。问题是，当您滚动他们的头像时，我试图显示关于他们的不同信息，并且我使用for循环来显示所有的人。当我使用下面的代码时，将显示每个人的正确头像，但是弹出信息对于每个人总是相同的，而不是特定于该人的信息。

<script>
$(function() {
  var moveLeft = 20;
  var moveDown = 10;

  $('a#trigger').hover(function(e) {
    $('div.pop-up').show();
      //.css('top', e.pageY + moveDown)
      //.css('left', e.pageX + moveLeft)
      //.appendTo('body');
  }, function() {
    $('div.pop-up').hide();
  });

  $('a#trigger').mousemove(function(e) {
    $("div.pop-up").css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
  });

});
</script>

{% for person in people %}
<div id="container">
    <a href="#" id="trigger"><img src="{{ MEDIA_URL }}/{{ person.avatar }}" /></a>
    <div class="pop-up">
        <h3>{{ person.name }}</h3>
        <p>{{ person.other_info }}</p>
    </div>
</div>

#Style Sheet
div.pop-up {
  display: none;
  position: absolute;
  width: 280px;
  padding: 10px;
  background: #eeeeee;
  color: #000000;
  border: 1px solid #1a1a1a;
  font-size: 90%;
}

所以循环中的每个人都会显示他们的头像，但当我滚动他们的头像时，会显示列表中最后一个人的信息。有谁知道怎么解决这个问题吗？提前谢谢。

Answer 1

要小心，在元素上使用class而不是ID，并确保只选择同级弹出窗口：

$(function() {
    var moveLeft = 20;
    var moveDown = 10;

    $('a.trigger').hover(function(e) {
      $(this).next('.pop-up').show();
        //.css('top', e.pageY + moveDown)
        //.css('left', e.pageX + moveLeft)
        //.appendTo('body');
    }, function() {
      $(this).next('.pop-up').hide();
    });

    $('a.trigger').mousemove(function(e) {
      $(this).next('.pop-up')
        .css('top', e.pageY + moveDown)
        .css('left', e.pageX + moveLeft);
    });
});

{% for person in people %}
<div class="person-container">
  <a href="#" class="trigger"><img src="{{ MEDIA_URL }}/{{ person.avatar }}" /></a>
  <div class="pop-up">
      <h3>{{ person.name }}</h3>
      <p>{{ person.other_info }}</p>
  </div>
</div>