Question

我在表格中有一个foreach循环，以动态显示来自DB的内容。

<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来引用弹出窗口但是有多个弹出窗口意味着这是不正确的。

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，所以应该可以工作。

Answer 3

嗯，这是因为您尝试使用具有相同ID的多个元素，因此会以意想不到的方式弄乱您的页面。改为使用类名。

如何动态更改div内容？

3 个答案: