标签:jquery idt onclick dex height int ddd for 索引
<style>
li{
list-style: none;width:40px;height: 40px;text-align:center;line-height: 40px;cursor: pointer;
}
</style>
html代码:
<ul id="uls">
<li style="background:#aaa">0</li>
<li style="background:#bbb">1</li>
<li style="background:#ccc">2</li>
<li style="background:#ddd">3</li>
</ul>
//这样写的话每次弹出都是最后一个值
// var lis=document.getElementsByTagName(‘li‘);
// for (var i = 0; i <=lis.length; i++) {
// lis[i].onclick = function(){
// alert(i);
// }
// };
使用闭包方法解决
//解决方法一:
var lis=document.getElementsByTagName(‘li‘);
for (var i = 0; i <=lis.length; i++) {
(function(i){
lis[i].onclick = function(){
alert(i);
}
})(i);
};
//解决方法二:
var lis=document.getElementsByTagName(‘li‘);
for (var i = 0; i <=lis.length; i++) {
lis[i].onclick = function(n){
return function(){
alert(n);
}
}(i);
};
//解决方法三(jquery):
$("ul li").click(function(){
var index = $(this).index(); //获取索引下标 也从0开始
alert($(this).html());
});
标签:jquery idt onclick dex height int ddd for 索引
原文地址:http://www.cnblogs.com/chuyi-123/p/6249624.html