首先先看代码:
html代码部分:
<div id="div">
<ul>
<li>1111111</li>
<li>2222222</li>
<li>3333333</li>
<li>4444444</li>
<li>5555555</li>
<li>6666666</li>
</ul>
</div>
对应的JS的代码部分:
var list = document.getElementsByTagName("li");
for(var i = 0; i < list.length; i++) {
list[i].onclick = function() {
console.log(i);
}
}
上面当我们在ul li遍历时，点击每一个li标签，往往取不到对应的下角标，在控制台打印出来的都是最后一个的值6。
为什么会产生这样的问题呢？
解决方案一:
JS方法
var list = document.getElementsByTagName("li");
for(var i = 0; i < list.length; i++) {
list[i].index = i;
list[i].onclick = function() {
console.log(this.index);
}
}
解决方案二:
jquery方法
$(function() {
$('#div').find('li').each(function() {
$(this).click(function() {
console.log($(this).index());
})
})
})
上面记得别忘了引入jQuery框架。
解决方案三：
直接利用jquery中的index
$(function() {
$("li").on("click", function() {
var i = $(this).index(); //当前索引值
alert(i);
})
})
解决方案四：
window.onload = onclickList;
function onclickList() {
var list = document.getElementsByTagName("li");
for(var i = 0; i < list.length; i++) {
list[i].onclick = (function(i) {
return function() {
alert("我是第" + (i + 1) + "个list");
}
}(i))
}
}
解决方案五：
$(function() {
$('ul li').click(function() {
alert($(this).index() + 1);
return false;
});
});
故整理以上方案，欢迎交流学习。