我有以下代码(在这种情况下是两个图像 - 但实际上,它可以被复制 N 次:
<figure title="" class="DragBox" dragableBox="true" style="opacity: 1;" id="thumb_1">
<span class="pic" id='UAJ754'>
<span class="imagewrap"> </span>
<span class="overlay">
<a href="fulldata.php?UAJ754" class="popUpSimple" rel="thumb_1">Image Information</a>
</span>
<img src="/pics/UAJ754.jpg" alt="">
</span>
<figcaption class="AlbumFig_Caption">A picture caption.
</figcaption>
</figure>
<figure title="" class="DragBox" dragableBox="true" style="opacity: 1;" id="thumb_2">
<span class="pic" id='JB6732'>
<span class="imagewrap"> </span>
<span class="overlay">
<a href="fulldata.php?JB6732" class="popUpSimple" rel="thumb_2">Image Information</a>
</span>
<img src="/pics/JB6732.jpg" alt="">
</span>
<figcaption class="AlbumFig_Caption">A second picture caption.
</figcaption>
</figure>
现在,具有 'pic' 类的 span 有一个与之关联的 jQuery mousedown 事件——因此无论鼠标点击哪个图像,pic 标签都会记录该事件并显示一个带有数据的弹出窗口。这一切都很好。
但是我需要获取鼠标按下的特定“图片”的 ID 标签,或者检索 IMG 的 src 以便我可以获取 ID,因为这需要传递到弹出窗口以显示正确的信息为正确的图片。
我有以下JS代码:
$(".pic").mousedown(function(e) {
var mouseX = e.pageX;
var mouseY = e.pageY;
if (e.which === 3) {
$('.infobox').css({'top':mouseY+'px','left':mouseX+'px'}).fadeIn();
var imgref = $(".pic").attr('id');
alert (imgref);
return false;
}else{
$('.info').fadeOut();
}
});
同样,这工作正常,但它只给我第一个 'pic' 跨度的 ID,无论单击哪个 'pic' 跨度。如何获取当前“图片”跨度的 ID 字段......当用户按下按钮时鼠标悬停的那个?