悬停时显示数据库的值

Question

我想为我的网站制作一个活动日历。在日历上，我想在悬停时在某个日期显示整个 event_description。但我不知道怎么做。我使用 jquery 和 mysqli 进行悬停和检索数据。

这是我当前项目的图像 http://i.stack.imgur.com/xNgZM.jpg

我有一个包含“event_id、event_title、event_date 和 event_description”的数据库

这就是我从数据库中获取价值的方式。

    while($r=$q->fetch_assoc()) {
        $event_id=$r['event_id']; //This is a unique ID from my DB
        $event_title=$r['event_title']; //Obvious title is obvious
        $event_desc=$r['event_desc']; // I want to post this on the popbox at the bottom
        echo $event_title."<br />";
    <a class='popper' data-popbox='pop2' href='viewEvent?id=$event_id'>See more</a><br />";
    echo "<div id='pop2' class='popbox'>";
    echo " <h2>Event for today!!</h2>";
    echo " This text should have the 'event_description'";
    echo "</div>";

div ID pop2 和 class popbox 是链接悬停时的代码。这是脚本

    $(function() {
    var moveLeft = 0;
    var moveDown = 0;
    $('a.popper').hover(function(e) {
    var target = '#' + ($(this).attr('data-popbox'));
    $(target).show();
    moveLeft = $(this).outerWidth();
    moveDown = ($(target).outerHeight() / 2);
    }, function() {
    var target = '#' + ($(this).attr('data-popbox'));
    $(target).hide();
    });
    $('a.popper').mousemove(function(e) {
    var target = '#' + ($(this).attr('data-popbox'));
    leftD = e.pageX + parseInt(moveLeft);
    maxRight = leftD + $(target).outerWidth();
    windowLeft = $(window).width() - 40;
    windowRight = 0;
    maxLeft = e.pageX - (parseInt(moveLeft) + $(target).outerWidth() + 20);
    if(maxRight > windowLeft && maxLeft > windowRight)
    {
    leftD = maxLeft;
    }
    topD = e.pageY - parseInt(moveDown);
    maxBottom = parseInt(e.pageY + parseInt(moveDown) + 20);
    windowBottom = parseInt(parseInt($(document).scrollTop()) +                parseInt($(window).height()));
    maxTop = topD;
    windowTop = parseInt($(document).scrollTop());
    if(maxBottom > windowBottom)
    {
    topD = windowBottom - $(target).outerHeight() - 20;
    } else if(maxTop < windowTop){
    topD = windowTop + 20;
    }
    $(target).css('top', topD).css('left', leftD);
    });
    });

请告诉我你希望看到什么代码来帮助我解决这个问题。在此先感谢 ;)

Answer 1

您可以按照以下步骤操作

(1)。你应该有一个像下面这样的悬停事件

例如。

$(".popper").hover(function(){
//.load should be here
$('#pop2').fadeIn(800);},function(){$("#pop2").fadeOut(800);});

示例http://jsfiddle.net/7dcuh/21/

(2)。现在你需要做的是，使用 .load 显示数据块

例子

$( "#pop2" ).load( "getevent.php", { eventid: <?php echo $event_id; ?> }, function() {alert( "done" );});

将 eventid 作为参数传递给 getevent.php。

阅读更多http://api.jquery.com/load/

对不起，我的英语不好。