是否有更简单的方法将多个类添加到不同的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)
});

JSFiddle:http://jsfiddle.net/TrueBlueAussie/kLgua7kf/

笔记:

• 在click事件中,单击this了DOM元素.$(this)是同一元素的jQuery对象.您需要保留对原始引用this,例如在var中,因为回调this内部setTimeout不同.
• 使用jQuery变量名称前缀$只是一个通用标准.无论你喜欢怎么称呼它:)
• 我使用绿色边框来显示您的fade课程,因为图像不可用.