如何刪除一個類，因爲每個圖像加載

我有一個頁面上的圖像數量。每個圖像都有一個CSS旋轉器，我想在每個圖像加載前顯示。目前，當'img'加載時，我已經將其刪除。這有效，但不是我想要的，因爲只要加載了任何'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>

SCSS：

.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");

這將刪除類是在同一水平上，並且具有相同的父所討論的IMG股利。

JS Fiddle Demo

來源

2014-09-22 11:57:21

Thankyou..this的偉大工程，據我可以告訴:)。我已經通過點擊功能對它進行了測試，並且在單擊每個圖像時刪除了每個微調控件類。 – Forrest 2014-09-22 12:02:18

在我的演示（我從你的分叉）我使用點擊功能。 – 2014-09-22 12:02:55

嘗試改變removeClass行這樣的：

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

這將讓當前的選擇，this，這是加載了img，並獲得它的上一個兄弟，這是div你想要的。

來源

2014-09-22 11:58:55 forgivenson

Thankyou ..這個作品很棒，據我所知可以:)。我已經通過點擊功能對它進行了測試，並且在單擊每個圖像時刪除了每個微調控件類。 – Forrest 2014-09-22 12:03:10

很高興能幫到你:) – forgivenson 2014-09-22 12:07:58

您需要使用.prev()找到以前div

使用

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

DEMO

來源

2014-09-22 11:59:52 Satpal

謝謝。我已經通過點擊功能對它進行了測試，並且在單擊每個圖像時刪除了每個微調控件類。 – Forrest 2014-09-22 12:07:57

如何刪除一個類，因爲每個圖像加載

回答

相關問題