Выгрузить div при загрузке изображения

Question

Выгрузить div при загрузке изображения

0

У меня есть следующий 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();
        });
    });
});

Darren Sweeney 19 фев. 2014, в 17:06

Источник

Теги:

jquery

2 ответа

1

ближайший() пересекает дерево DOM и получает первого предка.

В вашем случае .imageFill является предыдущим элементом sibling .sideImage поэтому вы можете использовать prev():

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

вместо:

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

Felix 19 фев. 2014, в 14:08

Ещё вопросы

Arun P Johny · Accepted Answer · 2014-02-19T12-52-00.000Z

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