疊加覆蓋圖像 - 無法自動運行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"); 
});