如何删除一个类，因为每个图像加载

我有一个页面上的图像数量。每个图像都有一个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

如何删除一个类，因为每个图像加载

回答

相关问题