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

　　JavaScript菜单项热点排序的实现示例，列表项或菜单项排序，按被点击次数排序（也可以是其他事件），这里只是一个示例而已，如果您想看到更完整的例子，可以在此基础上开发。

　　演示代码：

<div><br /> <ul id="menu"><br /> <li><span>First</span></li><br /> <li><span>Second</span></li><br /> <li><span>Third</span></li><br /> </ul><br /> <p id="status"></p><br /> <script><br /> // 这种排序方法是一种默认模式<br /> // 默认初始情况有两种：<br /> // 第一种：level值未设定，默认取0；<br /> // 第二种：level值已给定，并且列表<br /> // 已经按照从大到小（从上到下）排列好了。<br /> // 所以，与上（前）面的元素比较即可。<br /> var sortIt = function _(elt) {<br /> var pes = elt.previousElementSibling;<br /> if (pes && elt.level > pes.level) {<br /> var ihtml = elt.innerHTML,<br /> ilevel = elt.level;<br /> elt.innerHTML = pes.innerHTML;<br /> elt.level = pes.level;<br /> pes.innerHTML = ihtml;<br /> pes.level = ilevel;<br /> _(pes);<br /> }<br /> };<br /> // RBI：打点<br /> // 这里level值为单击(onclick事件)的次数，<br /> // 而rank默认为排序号（从0开始）。<br /> // 单击次数越多（level值越大），rank越靠前。<br /> function rbiIt(elts) {<br /> var i;<br /> for (i = 0; i < elts.length; i += 1) {<br /> elts[i].onclick = function (i) {<br /> var level = elts[i].level || 0,<br /> rank = elts[i].rank || i;<br /> return function (e) {<br /> this.level = ++level;<br /> this.rank = rank;<br /> sortIt(this);<br /> document.getElementById("status").innerHTML = "(" + this.rank + " : " + this.level + ")";<br /> };<br /> }(i);<br /> }<br /> };<br /> // 初始化<br /> // 可以自己给定level和rank值<br /> var elts = document.getElementById("menu").children;<br /> // var elts = document.getElementsByTagName("li");<br /> var k;<br /> for (k = 0; k < elts.length; k += 1) {<br /> elts[k].level = 0;<br /> //elts[k].rank = 0;<br /> }<br /> rbiIt(elts);<br /> // 烈火網 liehuo.net 欢迎复制,拒绝恶意采集 ｌｉｅｈｕｏ．ｎｅｔ<br /> </script><br /> </div><br /> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!