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);
  });
});

但它没有按预期工作。这意味着，在控制台中只打印未定义关键字，而不是点击图像的网址。此外，仅当单击第一张图像（images / image-2.jpg）时才会打印未定义。单击其他图像（图像-3，图像-4，图像-5）时，控制台上不会打印任何内容任何人都可以告诉我如何在点击图像时获取图像的网址 - 谢谢

Answer 1

id应该是唯一的，所以请改用class，否则只会选择id的第一个元素。并且您可以使用this内部处理程序来引用所单击的dom元素。由于this引用了span，因此您需要在其中加入img标记才能获得src。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

首先，页面上的所有元素应该具有唯一ID 。请改用class。

其次，如果你对html没有控制权并且真的......别无选择，那么只有你可以这样做：

$("[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"));

Answer 4

 $(document).ready(function () {
       $('.col-md-4').click(function () {
           alert($(this).find('img').attr('src'));
       });
   });

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

4 个答案: