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-Toggle在点击时显示.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();
});

为不同的类重复javascript代码，而不重复代码

1 个答案: