JavaScript實現LI列表數據綁定的方法
編輯：關於JavaScript
本文實例講述了JavaScript實現LI列表數據綁定的方法。分享給大家供大家參考。具體如下：
利用JavaScript進行LI列表數據綁定，獲取列表裡面對應的LI，這是一位高人寫的代碼，看了才知道，原來並不很復雜，為什麼之前用的方法那麼笨？
運行效果如下圖所示：
具體代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>JS數據綁定</title>
</head>
<body>
<ul id="list">
<li><a href="http://www.jb51.net/article/70585.htm" target="_blank">JavaScript運動減速效果實例分析</a></li>
<li><a href="http://www.jb51.net/article/70584.htm" target="_blank">JavaScript仿靜態分頁實現方法</a></li>
<li><a href="http://www.jb51.net/article/70583.htm" target="_blank">JavaScript實現選擇框按比例拖拉縮放的方法</a></li>
<li><a href="http://www.jb51.net/article/70582.htm" target="_blank">Javascript實現可旋轉的圓圈實例代碼</a></li>
<li><a href="http://www.jb51.net/article/70581.htm" target="_blank">JavaScript數組各種常見用法實例分析</a></li>
</ul>
<script type="text/javascript">
var list_obj = document.getElementById("list").getElementsByTagName("li");
//獲取list所有li對象數組
for (var i = 0; i <= list_obj.length; i++) {
list_obj[i].onmousemove = function() {
this.style.backgroundColor = "#cdcdcd";
}
list_obj[i].onmouseout = function() {
this.style.backgroundColor = "#FFFFFF";
}
list_obj[i].onclick = new function(n) {
return function(){alert("這是第" +(n+1)+"條");}
}(i);
}
</script>
</body>
</html>
希望本文所述對大家的javascript程序設計有所幫助。
小編推薦
熱門推薦