オーバーレイオーバーレイ画像 - srcを自動化できません

Question

イメージをクリックしたときにjqueryを使用するイメージがあります。イメージのイメージsrcが返されます。この画像にオーバーレイを付けるようにHTML/CSSを変更しました。

しかし、画像を上にしたときに左から右に表示されるオーバーレイを追加しました。これは、jqueryがイメージsrcを見つけようとするときのように複雑になりました。オーバーレイがそれをカバーしているため、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"); 
} 

は、しかし、これは明らかに、常にのでクリック機能は、現在のオーバーレイでどのように動作するかの、犬クラスで最初の画像のソースを返します。助言がありますか？

あなたはまだクリックされた .cover-overlay要素を参照するために thisを使用することができますが、今もそれから子供 imgを取得するために find()を使用する必要が

Answer 1

：

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