卸載一個div當圖像加載

Question

我有以下的html：

<div class="side"> 
    <div class="imageFill"></div> 
    <img src="/path/to/image1.jpg" class="sideImage"> 
</div> 
<div class="side"> 
    <div class="imageFill"></div> 
    <img src="/path/to/image2.jpg" class="sideImage"> 
</div> 
<div class="side"> 
    <div class="imageFill"></div> 
    <img src="/path/to/image3.jpg" class="sideImage"> 
</div> 

我希望發生的;因爲每個圖像滿載，我想隱藏前面的<div class="imageFill"></div>

這裏就是我想，但根本沒有隱藏起來：

$(document).ready(function(){ 
    $(".sideImage").each(function(){ 
     $(this).bind("load", function(){ 
      $(this).closest('.imageFill').fadeOut(); 
     }); 
    }); 
}); 

Answer 1

.closest()搜索匹配的元素，但在你的情況下，imageFill元素是sideImage元素的前一個兄弟，所以你需要使用.prev()

$(document).ready(function() { 
    $(".sideImage").on('load', function() { 
     //it is the previous sibling 
     $(this).prev('.imageFill').fadeOut(); 
    }).filter(function() { 
     //if the image is already loaded the load handler will not get triggered, so manually trigger it 
     return this.complete; 
    }).trigger('load'); 
}); 

Answer 2

closest()向上遍歷DOM樹並獲得始祖。

在你的情況，.imageFill是.sideImage以前的兄弟元素，所以你可以使用prev()：中

$(this).prev().fadeOut(); 

代替：在祖先樹

$(this).closest('.imageFill').fadeOut();