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>

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

如何进行此操作，以便在加载一个图像时，删除该图像的各个微调器。这是循环图像或其他东西的情况吗？

任何帮助都将受到高度赞赏。

感谢。

Answer 1

尝试以下方法：

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

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

JS Fiddle Demo

Answer 2

尝试将removeClass行更改为：

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

这将获得当前选择this，即已加载的img，并获取它之前的兄弟，即您想要的div。< / p>

Answer 3

您需要使用.prev()查找之前的div

使用

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

DEMO

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

3 个答案: