【JS】遍历选择jquery动态ID

版权声明：原创 https://blog.csdn.net/hangvane123/article/details/83896976

面对多个功能相似，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() {
	//业务逻辑...
}