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換行
})