javascript - 覆盖覆盖图像 - 无法自动化 src

Question

我有一个图像，当单击图像时使用 jquery，这将返回该图像的图像 src。我修改了我的 HTML/CSS 来为这张图片添加一个叠加层。

但是，我现在添加了一个叠加层，当图像悬停时，该叠加层从左到右出现。这增加了复杂性，因为现在当 jquery 试图找到图像 src 时，它不能因为覆盖覆盖它。

这意味着我必须为每个图像 src 手动编写代码，但这不起作用，因为显然当您单击每个图像时，每个图像都会有不同的 img src。

举个例子:

$(".dogs img").click(function(){
        var src = $(this).attr("src");
    });

现在我有一个叠加层，除非我真的很快并且击败了覆盖我屏幕的叠加层，否则我无法点击图像，而只能点击覆盖它的叠加层。

<div class = "cover-overlay">
     <img src = "dog-1.png">
</div>

<div class = "cover-overlay">
     <img src = "dog-2.png">
</div>

<div class = "cover-overlay">
     <img src = "dog-3.png">
</div>

所以现在我必须做，

$(".dogs .cover-overlay").click(function(){
        var src = $(".dogs img").attr("src");
}

然而，这显然总是会返回狗类中第一个图像的来源，因为点击功能现在如何与叠加一起使用。有什么建议吗？

Answer 1

您仍然可以使用 this 来引用被点击的 .cover-overlay 元素，但现在您还需要使用 find() 来从中获取子 img:

$(".dogs .cover-overlay").click(function(){
  var src = $(this).find('img').prop("src");
});