叠加覆盖图像 - 无法自动运行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"); 
});