获取id的语法

//点击导航选择图片
for(n=0; n<len;n++){
	nav[n].id=n;//此处用了nav[n].id有效，nav[n].getAttribute("id")无效
	nav[n].onclick=function(){
		alert(this.id);/*一个语法问题，为什么这边非要用this.id后
						才有效果，用nav[n].getAttribute("id")
						就不行*/
	}
}

为什么会出现这样的语法问题？？？？

慕丝6937110 2018-09-15

源自：项目：JS实现轮播特效 3-6 点击圆点切换图片（1）

收起

2回答

好帮手慕夭夭 2018-09-17 10:00:48

1.因为for循环中写点击事件 , 如下结构 :

如上中for循环能正常的输出0 ,1,2 . 而当i=3时 ,此时不满足for循环 , 就不会再输出3了 .虽然没有输出 , 但是此时i已经等于3 ,所以当你点击每个li时 , 由于for循环中会把最后一次的结果返回给点击事件 ,当点击任意一个li时 ,输出的都是3哦 .

同学所问的问题就是这个原理哦 . 如下

所以当你写nav[n].getAttribute("id")时 ,n拿到的值都是一样的 , 并且n的值已经超出最后一张图片的索引 ,无法获取到了哦 .

2.this.id , 点击事件中的this指向的是函数的调用者 . 也就是说 ,点击哪个元素时 ,this指向的就是谁哦 .所以this.id能够获取到点击当前元素的id.

建议同学自己测试一下 ,能够更好的帮助理解 , 祝学习愉快 ,望采纳

收起回答

好帮手慕夭夭 2018-09-16 10:39:16

for循环中的点击事件，因为在点击事件触发时，for循环会把循环的最后一次结果返回给事件，也就是每次点击i的值都是最后一次循环的结果。所以需要在点击时，获取this .id ，用来获取当前点击的元素的id哦

希望解答了你的疑惑，祝学习愉快！望采纳

收起回答

提问者慕丝6937110 #1

不不不，老师我目前不懂的是这个代码的语法问题，我对这个代码的理解是这样的：使用for循环，给四个导航栏的html标签分别设置id值（0,1,2,3）然后当我点击哪个导航选项，就让电脑alert那个相应的id值（点第一个，就跳出0）如果我的理解没有错的话，那我不理解的就只是获取id的这个dom语法问题写alert(this.id)电脑运作正常，但换成写nav[n].getAttribute("id")电脑就没有效果，这是为什么，这两句语法难道不是一个意思吗？？？包括之前给每一个导航标签设置id值时，写nav[n].id=n有效，但写nav[n].setAttribute("id")=n就又不行了，好晕啊

2018-09-16 14:09:26