jQuery中获取IMG标签的ID答案

【问题标题】：Obtaining the ID of an IMG tag in jQueryjQuery中获取IMG标签的ID
【发布时间】：2012-06-16 11:46:42
【问题描述】：

我有以下代码（在这种情况下是两个图像 - 但实际上，它可以被复制 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 字段...当用户按下按钮时鼠标悬停的那个？？

【问题讨论】：

Get ID of clicked on element in function 的可能重复项

标签： javascript jquery mouseevent html

【解决方案1】：

尝试：

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

或：

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

而不是：

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

$(".pic") 将给出第一个具有 pic 类的 div，而不是您点击的那个

【讨论】：

现在最好使用.prop('id')，或者只是this.id。

【解决方案2】：

var imgref =this.id;

因为 this 也是一个对象，而 $(this) 将一个对象包装在另一个对象中；

【讨论】：

谢谢 - 所以我说 $(this) 表示当前对象是否正确，不管它是什么？

【解决方案3】：

var imgref = $('img', this).attr('src');

你会得到IMG的src。

【讨论】：

【解决方案4】：

而不是使用var imgref = $(".pic").attr('id');

使用这个：var imgref = $(this).attr('id');

【讨论】：