面對多個功能相似，id相似的元素，如何一次為它們編碼？

<button id='btn1'></button>
<button id='btn2'></button>
<button id='btn3'></button>
<button id='btn4'></button>
<button id='btn5'></button>
<button id='btn6'></button>

選擇一：

為元素新增特有屬性，就可以選中了

<
 
button id='btn1' tgt='tgt'></button>
<button id='btn2' tgt='tgt'></button>
<button id='btn3' tgt='tgt'></button>
<button id='btn4' tgt='tgt'></button>
<button id='btn5' tgt='tgt'></button>
<button id='btn6' tgt='tgt'></button>

$('[tgt]'
 
).click(function() {
	//業務邏輯...
});

但缺點也很明顯，必須為元素手動新增屬性，元素型別必須一致，還要考慮將來修改時要同步修改屬性，屬性命名是否衝突等問題。

選擇二：

使用for迴圈變數拼接id

第一次嘗試使用的程式碼如下：

for(var i = 1; i <= 6; ++i) {
	$('#btn' + i).click(function() {
		//業務邏輯...
		alert(i);
	});
}

但這樣是不對的！當按下btn1時，我以為會彈出"1"，但是卻彈出"7"！
當按下btn1時，click方法內部使用的i和for迴圈中的i是同一個變數，而for迴圈中的i在頁面初始化時已經執行到成為了7(不滿足i<=6而退出迴圈)，此時alert則彈出"7"。

學習了js閉包後，修改程式碼如下：

for(var index = 1; index <= 6; ++index) {
	(function(i) {
		$('#btn' + i).click(function() {
			//業務邏輯...
			alert(i);
		});
	})(index)
}

按下btn1，彈出"1"，完美解決問題。

當按下btn1時，click方法內部使用的i是for迴圈中index傳參進function的值，此後無論index發生任何變化，都不會影響內部變數i的值。

類似地，為了便於迴圈呼叫，功能相似的方法可以使用以下方式宣告為陣列：

func = new Object();
func[0] = function() {
	//業務邏輯...
}
func[1] = function() {
	//業務邏輯...
}