0

当有人滚动图像时，我正在尝试为我的网站创建弹出窗口。问题是当您滚动他们的头像时，我试图显示有关人的不同信息，并且我使用 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%;
}

所以循环中的每个人都会显示他们的头像，但是当我滚动他们的头像时，会显示列表中最后一个人的信息。有谁知道该怎么做才能修复它？提前致谢。

4

1 回答 1

1

请注意，在元素上使用类而不是 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>
于 2013-03-21T22:47:42.053 回答