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

팝업이 표시되지만 내가 3가 .... 행이 첫 번째 행의 내용이 팝업에 표시됩니다, 2 위로 마우스를 이동할 때 문제입니다.
이유를 모르겠습니다. 어느 누구도이 일에서 나를 도울 수 있습니까?

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(); 
}); 

나는이 도움이 :)이 인 것처럼 당신이 팝업을 참조하지만에 ID를 사용하지만 여러 팝업을 가지고 있기 때문에 그것은 보이는

Answer 2

글쎄, 그것은 동일한 ID를 가진 여러 요소를 사용하려고 시도한 것이기 때문에 예기치 않은 방식으로 페이지를 망칠 것입니다. 클래스 이름을 대신 사용하십시오.

Answer 3

이가 잘못된 의미를 바랍니다.

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이므로 지금 작동해야합니다.