Как удалить класс при загрузке каждого изображения

У меня есть несколько изображений на странице. На каждом изображении есть счетчик CSS, который я хочу показать перед загрузкой каждого изображения. На данный момент у меня есть это, где, когда загружается «img», класс «spinner» удаляется. Это работает, но это не то, что я хочу, поскольку он удаляет класс «spinner» всякий раз, когда загружается «img».Как удалить класс при загрузке каждого изображения

Каждый img имеет свой собственный счетчик, и я хочу только удалить каждый «отдельный» счетчик, поскольку каждое изображение загружается.

Вот основной jsfiddle пример: http://jsfiddle.net/Forresty/xvx6maty/

Вот код:

HTML:

<div class="work_items_wrapper"> 
    <a class="work_item_link" href="#"> 
     <div class="spinner"></div> 
     <img class="workImage" src="http://i151.photobucket.com/albums/s129/Aiki_liann/cosmos.jpg"> 
    </a> 

    <a class="work_item_link" href="#"> 
     <div class="spinner"></div> 
     <img class="workImage" src="http://i151.photobucket.com/albums/s129/Aiki_liann/cosmos.jpg"> 
    </a> 

     <a class="work_item_link_no_margin" href="#"> 
      <div class="spinner"></div> 
      <img class="workImage" src="http://i151.photobucket.com/albums/s129/Aiki_liann/cosmos.jpg"> 
     </a> 
</div>

СКС:

.work_items_wrapper{ 
    margin: 2.8em auto; 
} 

.work_item_link{ 
    position: relative; 
    width: 32%; 
    height: auto; 
    float: left; 
    margin-right: 2%; 
    overflow: hidden; 

    img{ 
     width: 100%; 
     display: block; 
    } 
} 

.work_item_link_no_margin{ 
    position: relative; 
    width: 32%; 
    height: auto; 
    float: left; 
    overflow: hidden; 

    img{ 
     width: 100%; 
     display: block; 
    } 
} 

.spinner{ 
    width: 5em; 
    height: 5em; 
    background: red; 
    position: absolute; 
}

Javascript:

$('img').on('load', function() { 
    $("div").removeClass("spinner"); 
}).each(function() { 
    if(this.complete) $(this).load(); 
});

я заменил первую строку JavaScript с этим еще раз проверить:

$('img').on('click', function() {

Когда я нажал только один из образов, все 3 класса Горячо были удалены.

Как я могу это сделать, чтобы при загрузке одного изображения отдельный счетчик изображения был удален. Это случай прокрутки изображений или чего-то еще?

Любая помощь будет высоко оценена.

Спасибо.

источник

2014-09-22 Forrest

Попробуйте следующее:

$(this).siblings('div').removeClass("spinner");

Это удалит класс для DIV, который находится на том же уровне и имеет один и тот же родитель, как IMG в вопросе.

JS Fiddle Demo

источник

2014-09-22 11:57:21

Thankyou..this отлично работает, насколько я могу сказать :). Я тестировал его с помощью функции click, и каждый класс spinner удаляется при каждом щелчке изображения. – Forrest

В моей демонстрации (которую я разветвил у вас) я использую функцию щелчка. –

Попробуйте изменить removeClass линии к этому:

$(this).prev().removeClass("spinner");

Это позволит получить текущий выбор, this, который является img, который был загружен, и получить его предыдущий брат, который является div вы хотите.

источник

2014-09-22 11:58:55 forgivenson

Спасибо, это прекрасно работает, насколько я могу судить :).Я тестировал его с помощью функции click, и каждый класс spinner удаляется при каждом щелчке изображения. – Forrest

Рад я мог бы помочь :) – forgivenson

Вы должны использовать .prev() найти предыдущий div

Используйте

$('img').on('load', function() { 
    $(this).prev("div").removeClass("spinner"); 
});

DEMO

источник

2014-09-22 11:59:52 Satpal

Thankyou. Я тестировал его с помощью функции click, и каждый класс spinner удаляется при каждом щелчке изображения. – Forrest

Как удалить класс при загрузке каждого изображения

ответ

Смежные вопросы