js迴圈給li繫結事件實現 點選li彈出其索引值 和內容
html程式碼
<ul>
<li>香蕉</li>
<li>蘋果</li>
<li>菠蘿</li>
<li>獼猴桃</li>
<li>芒果</li>
</ul>
方法一:
var itemli = document.getElementsByTagName("li");
for(var i = 0; i<itemli.length; i++){
itemli[i].index = i; //給每個li定義一個屬性索引值，賦
itemli[i].onclick = function(){
alert("下標索引值為："+this.index+"\n"+"文字內容是："+this.innerHTML); // \n換行 索引值從0開始
}
}
方法二：（常用）
var itemli = document.getElementsByTagName("li");
for(var i = 0; i<itemli.length; i++){
(function(n){
itemli[i].onclick = function(){
alert("下標索引值為："+n+"\n"+"文字內容是："+itemli[n].innerHTML); // \n換行 索引值從0開始
}
})(i)
}
或者or：
for(var i = 0; i<itemli.length; i++){
itemli[i].onclick = function(n){
return function(){
alert("下標索引值為："+n+"\n"+"文字內容是："+itemli[n].innerHTML); // \n換行 索引值從0開始
}
}(i)
}
方法三：jQuery（更簡單）
$("ul li").click(function(){
var item = $(this).index(); //獲取索引下標 也從0開始
var textword = $(this).text(); //文字內容
alert("下標索引值為：" + item +"\n"+ "文字內容是："+textword); // \n換行
})