JavaScript菜單項熱點排序的實現示例,列表項或菜單項排序,按被點擊次數排序(也可以是其他事件),這里只是一個示例而已,如果您想看到更完整的例子,可以在此基礎上開發。
演示代碼:
<div><ul id="menu"><li><span>First</span></li><li><span>Second</span></li><li><span>Third</span></li></ul><p id="status"></p><script>// 這種排序方法是一種默認模式// 默認初始情況有兩種:// 第一種:level值未設定,默認取0;// 第二種:level值已給定,并且列表// 已經按照從大到小(從上到下)排列好了。// 所以,與上(前)面的元素比較即可。var sortIt = function _(elt) {var pes = elt.previousElementSibling;if (pes && elt.level > pes.level) {var ihtml = elt.innerHTML,ilevel = elt.level;elt.innerHTML = pes.innerHTML;elt.level = pes.level;pes.innerHTML = ihtml;pes.level = ilevel;_(pes);}};// RBI:打點// 這里level值為單擊(onclick事件)的次數,// 而rank默認為排序號(從0開始)。// 單擊次數越多(level值越大),rank越靠前。function rbiIt(elts) {var i;for (i = 0; i < elts.length; i += 1) {elts[i].onclick = function (i) {var level = elts[i].level || 0,rank = elts[i].rank || i;return function (e) {this.level = ++level;this.rank = rank;sortIt(this);document.getElementById("status").innerHTML = "(" + this.rank + " : " + this.level + ")";};}(i);}};// 初始化// 可以自己給定level和rank值var elts = document.getElementById("menu").children;// var elts = document.getElementsByTagName("li");var k;for (k = 0; k < elts.length; k += 1) {elts[k].level = 0;//elts[k].rank = 0;}rbiIt(elts);// 生活不易,碼農辛苦 如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
上一篇 中小站長在社區盈利過程中常犯的一些錯誤
下一篇 如何讓新裝上的MYSQL數據庫更加安全
程序員人生,我編程,我富裕,記住wfuyu網,php教程,php學習,php手冊,CMS模版制作
聲明:本站大部分內容是作者原創,少部分收集于互聯網供大家一起學習,原版權很多不明,如有侵權請聯系本站,謝謝!
粵ICP備14040726號-1?? 2015-2020 程序員人生 版權所有