javascript - 如何在加载每个图像时删除一个类

Question

我在一个页面上有很多图片。每个图像都有一个 CSS 微调器，我想在加载每个图像之前显示它。目前，我在加载“img”时删除了“spinner”类。这行得通，但不是我想要的，因为它会在加载任何“img”时删除类“spinner”。

每个 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>

CSS:

.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 个微调器类都被删除了。

我该怎么做才能在加载一张图片时删除该图片的单独微调器。是循环遍历图像还是什么？

如有任何帮助，我们将不胜感激。

谢谢。

Answer 1

尝试以下操作:

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

这将删除与所讨论的 img 处于同一级别且具有相同父级的 div 的类。

JS Fiddle Demo