最小化jQuery代码

目前，我有这个jQuery代码最小化jQuery代码

$('#f1').click(function() { 
$('#bg').addClass('f1'); 
}); 

$('#f2').click(function() { 
$('#bg').addClass('f2'); 
}); 

$('#f3').click(function() { 
$('#bg').addClass('f3'); 
});

的问题是什么我想做的事，我需要写了无数次，想知道如何能够缩短

来源

2012-08-22 Anna Riekic

使用multiple selector或给这些元素共同类（更好，如果你有更多的元素）：

$('#f1, #f2, #f3').click(function() { // $('.foo').click(...) 
    $('#bg').addClass(this.id); 
});

来源

2012-08-22 10:55:10

，我们可以这样做。

for(var i=1; i<=3;i++) 
{ 
    $('#f' + i).click(function() { 
     $('#bg').addClass('f' + i); 
    }); 
}

来源

2012-08-22 10:55:49

给他们选择一个类，然后

$('.foo').click(function() { 
    $('#bg').addClass(this.id); 
});

来源

2012-08-22 10:55:49 xdazz

有多种方法，这里有另外一个，如果你有很多的#fx的div：

var prefix = "f"; 

$("[id^="+prefix+"]").click(function() { 
    $('#bg').addClass(this.id); 
});

或者，如果所有你的元素在一个“容器”元素内：

$("#fContainer").children().click(function() { 
    $('#bg').addClass(this.id); 
});

来源

2012-08-22 10:57:51 Mahn

这将匹配所有以** f **开头的元素。此外，像这样慢的搜索方式，而不是给他们一个类名或通过使用多个ID。 – sQVe

确实如此，但这又取决于OP的需求。如果你有数百个元素，不能使用类，并且id的前缀是唯一的（即不是'f'），它可以是一个解决方案。 – Mahn

添加一个类来所有的人，然后就去做：

$('.class').click(function() { 
     $('#bg').addClass($(this).attr('id')); 
});

来源

2012-08-22 11:00:13 andy

假设你不想使用一个类（如其他人所说的）从您点击任务分开你的函数。

var clickHandler = function(){ 
    $('#bg').addClass(this.id); 
}; 
$('#f1, #f2, #f3').click(clickHandler);

来源

2012-08-22 12:24:18

最小化jQuery代码

回答

相关问题