程序开发

程序开发
您当前所在位置:主页 > 程序开发 >

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

发布日期:2019年01月02 编辑:

  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);
// 烈火網 bkjia.com 欢迎复制,拒绝恶意采集 liehuo.net
</script>
</div>
<br /><center>如不能显示效果,请按Ctrl+F5刷新本页,更多网页代码:<a href='http://www.bkjia.com/' target='_blank'>http://www.bkjia.com/</a></center>

提示:可修改后代码再运行!

http://www.bkjia.com/AJaxjc/366266.htmlwww.bkjia.comtruehttp://www.bkjia.com/AJaxjc/366266.htmlTechArticleJavaScript菜单项热点排序的实现示例,列表项或菜单项排序,按被点击次数排序(也可以是其他事件),这里只是一个示例而已,如果您想看...

本文源自: 凯发国际

< 上一篇:jquery ajax异步提交表单数据的方法

> 下一篇:没有了