javascript - 获取特定点击图像的路径

Question

Demo is here.

当我点击任何图片时，我想获取该图片的路径。这里的问题是每次只给出图像 1 的路径。

另外，有了新的 src，我想在图像中添加 id= cropimage 的 src

$(".img").click(function() {
    var newsrc = $(".img").attr("src");
    alert(newsrc);
});

Answer 1

在点击事件处理程序中使用 $(this) 获取被点击的元素。事件处理程序中的 $(this) 是事件发生的元素。

如果你使用 $('.img')，它会选择所有具有类 img 的元素，当使用 attr 时它，它将返回第一个匹配的选择器的属性值。

Demo

$(".img").click(function() {
  var newsrc = $(this).attr("src");
  $('#cropimage').attr('src', newsrc);

  // Even Shorter Form
  // $('#cropimage').attr('src', $(this).attr('src'));
});

#cropimage {
  background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<img class="img" src="http://www.w3schools.com/images/w3schools.png" />
<br/>
<img class="img" src="https://www.google.co.in/images/icons/hpcg/ribbon-black_68.png" />
<div id="img-container">
  <img src="" id="cropimage" />
</div>