JavaScript實現LI列表資料繫結的方法，javascriptli

JavaScript實現LI列表資料繫結的方法，javascriptli

本文執行個體講述了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.bkjia.com/article/70585.htm" target="_blank">JavaScript運動減速效果執行個體分析</a></li><li><a href="http://www.bkjia.com/article/70584.htm" target="_blank">JavaScript仿靜態分頁實現方法</a></li><li><a href="http://www.bkjia.com/article/70583.htm" target="_blank">JavaScript實現選擇框按比例拖拉縮放的方法</a></li><li><a href="http://www.bkjia.com/article/70582.htm" target="_blank">Javascript實現可旋轉的圓圈執行個體代碼</a></li><li><a href="http://www.bkjia.com/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程式設計有所協助。