最小化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代碼

回答

相關問題