javascript - 在jQuery中获取IMG标签的ID

Question

我有以下代码(在本例中为两张图片 - 但实际上，它可以复制 N 次:

<figure title="" class="DragBox" dragableBox="true" style="opacity: 1;" id="thumb_1">
   <span class="pic" id='UAJ754'>
      <span class="imagewrap">&nbsp;</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">&nbsp;</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();
            }
        });

同样，这工作正常，但它只给我第一个“图片”跨度的 ID，无论单击哪个“图片”跨度。如何获取当前“图片”跨度的 ID 字段……用户按下按钮时鼠标悬停的那个字段？？

Answer 1

尝试:

var imgref = $(this).attr('id');

或:

var imgref = $(this).prop('id');

代替:

var imgref = $(".pic").attr('id');

$(".pic") 将给出第一个类为 pic 而不是您单击的类

的 div