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()遍历DOM树并获得第一个祖先。

在您的情况下，.imageFill是.sideImage的上一个兄弟元素，因此您可以使用prev()：

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

而不是：

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

Answer 2

.closest()在祖先树中搜索匹配元素，但在您的情况下，imageFill元素是sideImage元素的前一个兄弟，因此您需要使用{{3 }}

$(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');
});

图像加载时卸载div

2 个答案: