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和类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/

了解详情

抱歉我的英语不好。

悬停时显示数据库的值

1 个答案: