Heim > Artikel > Web-Frontend > JavaScript-Methode zum Implementieren von LI-Listendatenbindungs-Javascript-Fähigkeiten

JavaScript-Methode zum Implementieren von LI-Listendatenbindungs-Javascript-Fähigkeiten

WBOYOriginal: 2016-05-16 15:47:171296Durchsuche

Das Beispiel in diesem Artikel beschreibt, wie die LI-Listendatenbindung in JavaScript implementiert wird. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Verwenden Sie JavaScript, um LI-Listendaten zu binden und den entsprechenden LI in der Liste zu erhalten. Nachdem ich ihn gelesen hatte, wurde mir klar, dass er nicht sehr kompliziert war.

Der Betriebseffekt ist wie folgt:

Der spezifische Code lautet wie folgt:

<!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>

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：jquery-Methode zur Echtzeitänderung der Schriftgröße der Webseite, der Hintergrundfarbe der Schriftart und der Farbe_jqueryNächster Artikel：jquery-Methode zur Echtzeitänderung der Schriftgröße der Webseite, der Hintergrundfarbe der Schriftart und der Farbe_jquery

In Verbindung stehende Artikel

Mehr sehen