如何在使用jQuery单击图像时获取图像源？

Question

假设我的项目中有以下图像：

<div class='slider-img'>
    <span id='mimg' class='col-md-4 adjust-1'> <img src="images/image-2.jpg" alt=""> </span>
    <span id='mimg' class='col-md-4 adjust'> <img src="images/image-3.jpg" alt=""> </span>
    <span id='mimg' class='col-md-4 adjust'> <img src="images/image-4.jpg" alt=""> </span>
    <span id='mimg' class='col-md-4 adjust'> <img src="images/image-5.jpg" alt=""> </span>
</div>

现在，我想得到一个图片的网址，当它被点击。因此，我已经习惯于遵循jQuery代码：

$(document).ready( function() {
  $('#mimg').click( function() {
    var id = $('#mimg').attr('src');
    console.log(id);
  });
});

但它并不像预期的那样起作用。这意味着，在控制台中只有未定义的关键字是打印的，而不是单击图像的url。此外，未定义的仅在单击第一张图像(图像/图像-2.jpg)时才被打印。当其他图像被点击(图像-3，图像-4，图像-5)时，控制台上什么都不会打印。

有人能告诉我，当一个图片被点击时，我怎样才能得到它的网址？

• 谢谢

Answer 1

id应该是唯一的，所以使用class代替，否则它只会选择带有id的第一个元素。您可以在处理程序中使用this来引用单击的dom元素。由于this指的是span，因此需要在其中获取img标记才能获得src。

​

$(document).ready(function() {
  $('.mimg').click(function() {
    var id = $('img', this).attr('src');
    console.log(id);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='slider-img'>
  <span class='col-md-4 adjust-1 mimg'> <img src="images/image-2.jpg" alt=""> </span>
  <span class='col-md-4 adjust mimg'> <img src="images/image-3.jpg" alt=""> </span>
  <span class='col-md-4 adjust mimg'> <img src="images/image-4.jpg" alt=""> </span>
  <span class='col-md-4 adjust mimg'> <img src="images/image-5.jpg" alt=""> </span>
</div>

​

Answer 2

首先，页面上的ALL元素应该有一个唯一的ID。使用class代替。

其次，如果您没有对html的控制，并且really...reallly没有选择，那么只有您可以这样做：

$("[id='mimg']").click(function(){
   alert($(this).find("img").attr("src"));
});

Answer 3

不能对多个元素使用相同的id。用类代替。

    <div class='slider-img'>
        <span id='mimg1' class='col-md-4 adjust-1'> <img src="images/image-2.jpg" alt=""> </span>
        <span id='mimg2' class='col-md-4 adjust'> <img src="images/image-3.jpg" alt=""> </span>
        <span id='mimg3' class='col-md-4 adjust'> <img src="images/image-4.jpg" alt=""> </span>
        <span id='mimg4' class='col-md-4 adjust'> <img src="images/image-5.jpg" alt=""> </span> </div>

<script>
alert($("#mimg1 img").attr("src"));