如何动态更改 div 内容？答案

【问题标题】：How to change the div content dynamically?如何动态更改 div 内容？
【发布时间】：2012-03-05 22:07:44
【问题描述】：

我在表格中有一个 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 行时，弹出窗口中仅显示第一行的内容。
我不知道为什么。任何人都可以帮助我吗？

【问题讨论】：

为什么显示工作正常的位的代码？

标签： jquery html

【解决方案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();
});

我希望这会有所帮助:)

【讨论】：

感谢您的回答。这对我很有帮助。
加载 div 时，我得到的输出为“2012 年 3 月 5 日，晚上 9:00”。有什么办法可以单独获得“三月”....
嗨，我按你说的试过了。但我需要一些澄清。我有 3 行和 4 列。当我将鼠标悬停在一行上时，我需要获取那些“td”的所有值。 $('.MonthText').html($(this).html());只给出鼠标指向的 td 的值。
我试图为那个特定的 td 分配一个 id 并将值获取为 $('.MonthText').html($('#test').html());，但我没有不行。
试试看。在上放一个类并使用 change $(this) for $(".line").html() 这将返回该行中的所有 html 而这个 html 就是所有跨度>

【解决方案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，所以应该可以工作。

【讨论】：

【解决方案3】：

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

【讨论】：