为不同的类重复一个javascript代码,不用重复代码
问题描述:
我有这段代码,你可以点击一个img来滑下一个类。 只有我想重复这个过程多个案件,但我知道这样做的唯一方法是用不同的名称重复的JavaScript。为不同的类重复一个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点击 等...
而不必每次创建一个新的代码?
答
使用常见的类图像切换,并使用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();
});
都可以根据你的标记进行调整?请包含您的HTML – DaniP