マウスオーバーでdivコンテンツを動的に変更するにはどうすればいいですか？

Question

可能性の重複：
How to show/hide a div on mouseover using jquery?

Iを動的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 class = "popup"> 
       <div class="Month"> 
        <div class="MonthDiv"> 
         <span class="MonthText">'.$testcontent[0].'</span> 
        </div> 
       </div> 
       <div class='Day'> 
        <div class="DayDiv"> 
         <span class="DayText">'.$testcontent[1].'</span> 
        </div> 
       </div> 
       <div class='Time'> 
        <div class="TimeDiv"> 
         <span class="TimeText">'.$testcontent[2].'</span> 
        </div> 
       </div> 
     </div>'; 
    echo '</tr>'; 
} 
?> 
</table> 

ポップアップを表示/非表示にする機能は続く...

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

    $('.trigger').hover(function(e) { 
     $('.popup').show();    
    }, function() { 
     $('.popup').hide(); 
    }); 

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

参照のとおりです。I used this link to display popup

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

私も今、マウスのポイントは
私がする必要がある値を持つdiv要素の変更

div.popup { 
    display: none; 
    position: absolute; 
    width: 640px; 
    padding: 10px; 
    background:#FFFFFF; 
    color: #000000; 
    border: 1px solid #1a1a1a; 
    font-size: 90%; 
    height:400px; 
} 

...

$('.trigger').hover(function(e) { 
    $('.MonthText').html($(this).html()); 
    $('.popup').show(); 
} 

ポップアップのCSSがあるとみました変更するために行全体の値を取得....（私は全体のdivをリロードする必要があることを意味する）
私は長い間これに取り組んでいる時間。
私を助けてください...
変更内容：ポップアップIDをクラスに置き換えましたが、同じ結果が得られました。

Answer 1

すべてのポップアップディビジョンは同じですので、理想的にはjQueryが最初のものを選択します。 .trigger要素とポップアップdivに、どのdivをポップアップするかを示す属性を追加しようとしています（ループからのインデックスを使用できます）。ホバーイベントでは、その属性値を使用して正しいポップアップを表示できます。

私は電話から入力しているので、サンプルコードはありません。

$(document).ready(function(){ 
    $('.trigger').click(function(){ 
     $(this).parent().children('.popup').show(); 
    }); 
}); 

これが動作するかどうか、私に教えてください以下の異なるサンプル：私はあなたが他にこのことを理解していれば、私はサンプル

編集を提供することができます知ってみましょう。 @ abhijeet-pawarからの上記の答えは、理想的にも働くはずです

Answer 2

最初のことはhtmlページで繰り返さないでください。したがって、idの代わりに 'popup'をクラスとして変更してください。

<div class="popup" style="display:none"> 
... 

変化としてjQueryのは、次のとおりです。

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

    $("table").on("mouseenter ", ".trigger", function() { 
     $(this).siblings('.popup').show(); 
    }); 
    $("table").on("mouseleave ", ".trigger", function() { 
     $(this).siblings('.popup').hide(); 
    }); 
    $("table").on("mousemove", ".trigger", function() { 
     $(this).siblings('.popup').css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft); 
    }); 

});