对不同的 类 重复一个 javascript 代码而不重复代码

Question

我有这段代码，你可以点击 img 向下滑动 class。 只有我想在多个案例中重复这个过程，但我知道的唯一方法是用不同的名字重复 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();
});

但是当单击任何图像时显示所有 classes（当然）

我该怎么做 .Img-Toggle 在点击时显示 .slideDown 和 .Img-Toggle2 在点击时显示 .slideDown2 等...

无需每次都创建新代码？

Answer 1

对图像切换使用通用 class，link 使用 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();
});