对不同的 类 重复一个 javascript 代码而不重复代码
Repeat a javascript code for different classes without repeating the code
我有这段代码,你可以点击 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
等...
无需每次都创建新代码?
对图像切换使用通用 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();
});
我有这段代码,你可以点击 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 等...
无需每次都创建新代码?
对图像切换使用通用 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();
});