0

誰かが画像をスクロールしたときに、自分の Web サイトのポップアップを作成しようとしています。問題は、アバターをスクロールしたときに人々に関するさまざまな情報を表示しようとしていて、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 に答える