我的程序是显示日历中特定日期是否有活动。我去我的数据库检查日期是否与事件有关，并将其回复给用户。
我有一个生成多个值的循环，ID最终将作为数据库中的相应ID。
以下是具有多个ID的标记：
echo "<br /><a class='popper' id='$event_id' data-popbox='pop2' href='#'>See more...</a><br />";
如何将ID传递给此ajax调用（我的功能是悬停链接以便用户查看带有详细信息的popbox）？
$(function() {
$( "#pop2" ).load( "GET.php", { eventid: <?php echo $event_id; ?> }, 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(thisEvent) {
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);
});
});
我的主要问题是，当我悬停事件的不同链接时，只返回一个值。如何传递用户悬停的特定ID并在我的PHP文件中查询它。
提前感谢您的回答！ ：）
答案 0 :(得分：0)
这是一些疯狂的意大利面条代码。尝试将问题分解为步骤。
1）php是否正确地回显了html？
2）你能在控制台中选择那个元素吗？
$('.popper')
3）它有id吗？
$('.popper').attr('id')
4）你可以在悬停状态下记录该元素的id吗？
$('.popper').bind('hover', function(){
console.log($(this).attr('id'));
});
5）将其存储为变量
$('.popper').bind('hover', function(){
var id = $(this).attr('id');
console.log(id);
});
6）调用一个函数：
function getDetails(id){
$.get('http://example.com/?details='+id, function(data){
console.log(data);
})
}
$('.popper').bind('hover', function(){
var id = $(this).attr('id');
getDetails(id);
});
答案 1 :(得分：0)
这可能与您无关，但无论如何我都会发布我的代码。我同时在屏幕上有四个月的时间。当用户点击特定日期时，每日时间表的另一个弹出窗口会出现在jQuery对话框中（例如，9：00-名称，评论，约会目的等）这是足够通用的，以便您可以在特定时间使用它时间，日，月，无论你想要什么。
我不使用单个元素标识符，我使用伪类选择器。
下面的代码读取数据库，并使用该时间段的相关数据填充每个时间段。因此，当您将鼠标悬停在该时间段内时，所有存储的信息都会弹出另一个窗口。
$.ajax({
type: 'POST',
data: { date: scheduledate,
service: typeofservice},
url: 'readdayschedulebackend.php',
dataType: 'json',
})
.done(function(result){
ttime = new Date();
ttime.setHours(8,0);
for(var t = 0; t <30; ++t)
{
tablehours = ttime.getHours();
tableminutes = ttime.getMinutes();
if (tablehours < 10)
{ tablehours = '0' + tablehours; }
if (tableminutes < 10)
{ tableminutes = '0' + tableminutes; }
// console.log(tablehours + ':' + tableminutes);
$('#popupscheduletable tbody tr:nth-child('+ (t+1) +') td:nth-child(1)').html( tablehours + ':' + tableminutes );
tablehours2 = ttime.getHours()+4;
if (tablehours2 < 10)
{ tablehours2 = '0' + tablehours2; }
$('#popupscheduletable tbody tr:nth-child('+ (t+1) +') td:nth-child(3)').html( tablehours2 + ':' + tableminutes );
stringtime = tablehours + ':' + tableminutes + ':00';
stringtime2 = tablehours2 + ':' + tableminutes + ':00';
ttime = new Date(ttime.setMinutes( ttime.getMinutes() + 10 ));
$.each( result, function(index, element){
if (element.time == stringtime)
{
$('#popupscheduletable tbody tr:nth-child('+ (t+1) +') td:nth-child(2)').css( "background-color", "#F578A2" );
tdname = element.lastname + ', ' + element.firstname + ' ' + element.middlename;
tdname = tdname.substring(0,10);
$('#popupscheduletable tbody tr:nth-child('+ (t+1) +') td:nth-child(2)').text( tdname );
$('#popupscheduletable tbody tr:nth-child('+ (t+1) +') td:nth-child(2)').data( 'tdlastname', element.lastname);
$('#popupscheduletable tbody tr:nth-child('+ (t+1) +') td:nth-child(2)').data( 'tdfirstname', element.firstname);
$('#popupscheduletable tbody tr:nth-child('+ (t+1) +') td:nth-child(2)').data( 'tdmiddlename', element.middlename);
$('#popupscheduletable tbody tr:nth-child('+ (t+1) +') td:nth-child(2)').data( 'tddob', element.dob);
$('#popupscheduletable tbody tr:nth-child('+ (t+1) +') td:nth-child(2)').data( 'tdlocalid', element.localid);
$('#popupscheduletable tbody tr:nth-child('+ (t+1) +') td:nth-child(2)').data( 'tduniqueid', element.uniqueid);
$('#popupscheduletable tbody tr:nth-child('+ (t+1) +') td:nth-child(2)').data( 'tdcomments', element.comments);
$('#popupscheduletable tbody tr:nth-child('+ (t+1) +') td:nth-child(2)').data( 'tddate', element.date);
$('#popupscheduletable tbody tr:nth-child('+ (t+1) +') td:nth-child(2)').data( 'tdtime', element.time);
$('#popupscheduletable tbody tr:nth-child('+ (t+1) +') td:nth-child(2)').data( 'tdservice', element.service);
}
if (element.time == stringtime2)
{
$('#popupscheduletable tbody tr:nth-child('+ (t+1) +') td:nth-child(4)').css( "background-color", "#F578A2" );
tdname2 = element.lastname + ', ' + element.firstname + ' ' + element.middlename;
tdname2 = tdname2.substring(0,10);
$('#popupscheduletable tbody tr:nth-child('+ (t+1) +') td:nth-child(4)').text( tdname2 );
$('#popupscheduletable tbody tr:nth-child('+ (t+1) +') td:nth-child(4)').data( 'tdlastname', element.lastname);
$('#popupscheduletable tbody tr:nth-child('+ (t+1) +') td:nth-child(4)').data( 'tdfirstname', element.firstname);
$('#popupscheduletable tbody tr:nth-child('+ (t+1) +') td:nth-child(4)').data( 'tdmiddlename', element.middlename);
$('#popupscheduletable tbody tr:nth-child('+ (t+1) +') td:nth-child(4)').data( 'tddob', element.dob);
$('#popupscheduletable tbody tr:nth-child('+ (t+1) +') td:nth-child(4)').data( 'tdlocalid', element.localid);
$('#popupscheduletable tbody tr:nth-child('+ (t+1) +') td:nth-child(4)').data( 'tduniqueid', element.uniqueid);
$('#popupscheduletable tbody tr:nth-child('+ (t+1) +') td:nth-child(4)').data( 'tdcomments', element.comments);
$('#popupscheduletable tbody tr:nth-child('+ (t+1) +') td:nth-child(4)').data( 'tddate', element.date);
$('#popupscheduletable tbody tr:nth-child('+ (t+1) +') td:nth-child(4)').data( 'tdtime', element.time);
$('#popupscheduletable tbody tr:nth-child('+ (t+1) +') td:nth-child(4)').data( 'tdservice', element.service);
}
});
}
});//end ajax.done
});//end open large day dialog
//将鼠标悬停在预定时间并显示详细信息
$（'＃popupscheduletable tbody tr td：nth-child（even）'）。hover（
功能（）{
if（$（this）.html（）。length＆gt; 1）
{
$（'。rolloverdiv'）。html（$（this）.data（'tdlastname'）+'，'+
$（this）.data（'tdfirstname'）+''+
$（this）.data（'tdmiddlename'）+''+'
'+
'DOB：'+
$（this）.data（'tddob'）+'
'+
$（this）.data（'tdcomments'）+'
'
）;
} else {
$（'。rolloverdiv'）。html（''）;
}
}，
功能（）{
$（'。rolloverdiv'）。html（''）
}
）;
===========================================
//hover over scheduled time and show details
$('#popupscheduletable tbody tr td:nth-child(even)').hover(
function(){
if ( $(this).html().length > 1 )
{
$('.rolloverdiv').html( $(this).data('tdlastname') + ', ' +
$(this).data('tdfirstname') + ' ' +
$(this).data('tdmiddlename') + ' ' + '<br>' +
'DOB: ' +
$(this).data('tddob')+ '<br>' +
$(this).data('tdcomments') + '<br>'
);
} else {
$('.rolloverdiv').html( ' ' );
}
},
function(){
$('.rolloverdiv').html( ' ' )
}
);