为不同的类重复一个javascript代码，不用重复代码

Question

我有这段代码，你可以点击一个img来滑下一个类。 只有我想重复这个过程多个案件，但我知道这样做的唯一方法是用不同的名称重复的JavaScript。

像这样：

$(window).load(function() { 
    $('.Img-Toggle').click(function(e){ 
     $('.slideDown').slideToggle(); 
    }); 
    $('.Img-Toggle2').click(function(e){ 
     $('.slideDown2').slideToggle(); 
    }); 
    $('.Img-Toggle3').click(function(e){ 
     $('.slideDown3').slideToggle(); 
    }); 
}); 

我也尝试过这样的事情：

$('.Img-Toggle .Img-Toggle2 .Img-Toggle3').click(function(e){ 
    $('.slideDown .slideDown2 .slideDown3').slideToggle(); 
}); 

但是，当点击任何

（当然）图像的我怎么能显示所有类使 .Img切换显示.slideDown点击 和 .Img-Toggle2显示.slideDown2点击 等...

而不必每次创建一个新的代码？

Answer 1

使用常见的类图像切换，并使用data-*链接相关的元素属性

<img class="img-toggle" data-link=".slideDown" src="..."> 
<img class="img-toggle" data-link=".slideDown2" src="..."> 

，写一次你的代码

$('.img-toggle').click(function(e){ 
    var link = $(this).data("link"); 
    $(link).slideToggle(); 
});