javascript - 有没有更简单的方法将多个类添加到不同的div jquery

Question

我在点击时淡出不同的div一段时间，目前每个操作都有一个函数，我将它们命名为.fade-a，.fade-b，.fade-c等。当然必须有更好的方法来做到这一点，因为目前我的列表似乎很臃肿。

抱歉，如果我没有很好地解释这一点，我不太使用 jQuery。

谢谢

$('.fade-a').click(function() {
    $('.fade-a').addClass('fade');
    var delay = setTimeout(function() {
        $(".fade-a").removeClass("fade");
    }, 1000)
});
$('.fade-b').click(function() {
    $('.fade-b').addClass('fade');
    var delay = setTimeout(function() {
        $(".fade-b").removeClass("fade");
    }, 1000)

});
$('.fade-c').click(function() {
    $('.fade-c').addClass('fade');
    var delay = setTimeout(function() {
        $(".fade-c").removeClass("fade");
    }, 1000)

});
$('.fade-d').click(function() {
    $('.fade-d').addClass('fade');
    var delay = setTimeout(function() {
        $(".fade-d").removeClass("fade");
    }, 1000)

});

HTML:

<div class="width33 site-top">
    <span>
        <img class="info-block-toggle-a fade-a site-overlay size-auto" src="images/i-am-the-cosmos.jpg" alt="" />
    </span>
</div>
<div class="width33 site-middle">
    <span>
        <img class="info-block-toggle-b fade-b site-overlay size-auto" src="images/dorje.jpg" alt="" />
    </span>
</div>
<div class="width33 site-bottom">
    <span>
        <img class="info-block-toggle fade-c site-overlay size-auto" src="images/harvey.png" alt="" />
    </span>
</div>

CSS:

.fade-a, .fade-b, .fade-c, .fade-d, .fade-e, .fade-f, .fade-g, .fade-h, .fade-i {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    -ms-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
}
.fade-a.fade, .fade-b.fade, .fade-c.fade, .fade-d.fade, .fade-e.fade, .fade-f.fade, .fade-g.fade, .fade-h.fade, .fade-i.fade {
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
}

Answer 1

对所有这些使用相同的类(例如 fademe)并执行以下操作:

$('.fademe').click(function() {
    var $this = $(this);
    $this.addClass('fade');
    setTimeout(function() {
        $this.removeClass("fade");
    }, 1000)
});

代码片段:

$('.fademe').click(function() {
  var $this = $(this);
  $this.addClass('fade');
  var delay = setTimeout(function() {
    $this.removeClass("fade");
  }, 1000)
});

.fade {
  border: 1px solid green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="width33 site-top">
  <span>
        <img class="info-block-toggle-a fademe site-overlay size-auto" src="https://via.placeholder.com/150/FF0000/FFFFFF?text=1" alt="" />
    </span>
</div>
<div class="width33 site-middle">
  <span>
        <img class="info-block-toggle-b fademe site-overlay size-auto" src="https://via.placeholder.com/150/00FF00/FFFFFF?text=1" alt="" />
    </span>
</div>
<div class="width33 site-bottom">
  <span>
        <img class="info-block-toggle fademe site-overlay size-auto" src="https://via.placeholder.com/150/0000FF/FFFFFF?text=1" alt="" />
    </span>
</div>

注释:

• 在点击事件中，this 是点击的 DOM 元素。 $(this) 是同一元素的 jQuery 对象。您需要保留对原始 this 的引用，例如在 var 中，因为 setTimeout 回调中的 this 是不同的。
• 在 jQuery 变量名前添加 $ 只是一个通用标准。随便你怎么调用它:)
• 由于图像不可用，我使用绿色边框来显示您的 fade 类。