爲不同的類重複一個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(); 
});