divコンテンツを動的に変更するには？

Question

DB内のコンテンツを動的に表示するために、テーブル内にforeachループがあります。

<table cellpadding="3" cellspacing="0" align="center"> 

<?php 
    foreach($test as $testcontent){ 
        echo '<tr>'; 
     echo '<td class="trigger">'.$testcontent[0].'</td>'; 
     echo '<td class="trigger">'.$testcontent[1].'</td>'; 
     echo '<td class="trigger">'.$testcontent[2].'</td>'; 
     echo '<div id = popup style="display:none"> 
       <div class="Month"> 
         <div class="MonthDiv"> 
          <span class="MonthText">'.$testcontent[0].'</span> 
         </div> 
       </div> 
      </div>'; 
      echo '</tr>'; 
    } 
?> 
</table> 

機能以下のようにポップアップが表示/非表示にする...

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

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

$('.trigger').mousemove(function(e) { 
    $("#popup").css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft); 
}); 

}）。

参照：I used this link for popup

ポップアップが現れるが、私は2番目の上にマウスを移動すると、問題は、3 ....行、最初の行の内容のみがポップアップで示されています。
理由はわかりません。誰にでも私を助けられますか？

Answer 1

これは、コード内でdivポップアップの内容を変更しないためです。

$('.trigger').hover(function(e) { 
    // Change the content of popup 
    $('.MonthText').html($(this).html()); 
    // Later show the popup 
    $('#popup').show(); 
    //.appendTo('body'); 
}, function() { 
    $('#popup').hide(); 
}); 

私はこのことができます:)

Answer 2

これは、同じIDを持つ複数の要素を使用しようとしているためです。そのため、予期しない方法でページが壊れてしまいます。代わりにクラス名を使用してください。

Answer 3

それはあなたがポップアップにREFEREにIDを使用しているので、それがあるかのように見えますが、その後、複数のポップアップを持つことは、これは間違っていることを願っています。

JQueryはIDポップアップを持つ最初の要素を見つけ出して表示しています。

解決策はおそらくrel属性を使用し、ポップアップIDをクラスに変更することです。あなたは可能です。

<td class="trigger" rel="popup-0">Text</td> 

<div class="popup" rel="popup-0">Popup</div> 

$('.trigger').mousemove(function(e) { 
    var rel = $(e.target).attr('rel'); 
    $(".popup[rel='" + rel + "']").css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft); 
}); 

これはテストしていませんが、動作するはずです。私は基本的にトリガーに一致するrel属性を持つポップアップを探しています。これは現在有効なxhtmlなので、うまくいくはずです。