JavaScript菜单项热点排序的实现示例

　　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); // 烈火網 liehuo.net 欢迎复制,拒绝恶意采集 ｌｉｅｈｕｏ．ｎｅｔ </script> </div> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：云计算网_泰州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!