JS分类选择插件-起风网

需要做一个选择分类工具，大致要求如下：

　　点击按钮，显示一级分类，指向某个一级分类显示对应二级分类，分类有几层不定。

只能选择最后一个分类，然后把分类的ID 传值给按钮的value

我的思路：

1.后台传过来的值是json，结构如下：

var json = [
　　{“name”:”衣服” , “id” : “1” , “pid” : 0},
　　{“name”:”裤子” , “id” : “2” , “pid” : 1}

];

pid是父类的ID，pid为0代表1级分类

2.根据json建立dom树，css样式很简单等会看最后的代码，结构如下：

</ul>

3.查询是否有下级分类，如果没有可以点击，点击后复制给按钮；否则绑定显示下级分类的hover事件

写了一下午，代码量大，头也晕，写得也确实不容易读。想要查看，直接复制以下代码，无图片，无外带JS，不是歪货功能OK。

<!doctype html>
<html>
<head>
<title>分类选择器</title>

</style>
</head>

//pid代表父ID,0代表根
var json = [
{“name”:”衣服” , “id” : “1” , “pid” : 0},
{“name”:”裤子” , “id” : “2” , “pid” : 0},
{“name”:”鞋子” , “id” : “3” , “pid” : 0},

{“name”:”衬衣” , “id” : “4” , “pid” : 1},
{“name”:”毛衣” , “id” : “5” , “pid” : 1},
{“name”:”内衣” , “id” : “6” , “pid” : 1},

{“name”:”大” , “id” : “10” , “pid” : 6},
{“name”:”大” , “id” : “11” , “pid” : 7},
{“name”:”大” , “id” : “7” , “pid” : 4},
{“name”:”中” , “id” : “8” , “pid” : 4},
{“name”:”小” , “id” : “9” , “pid” : 4}
];//IE下最后一个数组不能给逗号,否则会多算一条

this.addNodes(this.treeRoot.getElementsByTagName(“ul”)[0]);//获取插入的根ul,再查询是否有子类
},

//查询是否还有子分类，有则添加
addNodes : function(pUl){//parent ul
function creatEl(name){return document.createElement(name);}//创建标签
var li = pUl.getElementsByTagName(“li”);
/*
遍历li。特别注意：由于下个for循环条件满足添加了子类后，pUl（也就是根ul）中便添加了li,li.length会改变。
新添加的li永远在当前指针节点之后，所以不会冲突或者遗漏，而且能够在此循环结束后完成整个dom树
*/
for(var i=0;i<li.length;i++){
var pid = parseInt(li[i].getElementsByTagName(“span”)[0].alt);//根据span的title存储的ID，查找json队列里是否还有子类//alert(typeof(pid));
var ul = creatEl(“ul”);
var isExist = false;//是否存在子类
for(var j=0;j<this.json.length;j++){//遍历json，
if(this.json[j].pid == pid){//pid相同，添加节点到pUl
var newLi = creatEl(“li”);
var newSpan = creatEl(“span”);
newSpan.alt = this.json[j].id;
newSpan.innerHTML = this.json[j].name;
newLi.appendChild(newSpan);
ul.appendChild(newLi);
this.json.splice(j,1);
j–;
isExist = true;
}
}
if(isExist){
li[i].appendChild(ul);
}
}
},

//查找分类
seekClassify : function(){
var self = this;
//点击触发分类显示
this.btnClick.onclick = function(){
self.treeRoot.style.display = “block”;
self.nextClassify(self.treeRoot,”block”);//显示根分类
}
},

//绑定事件，隐藏和显示下级分类
bindHover : function(){
var self = this;
var li = self.treeRoot.getElementsByTagName(“li”);//获取所有li
//绑定根
var root =self.treeRoot.getElementsByTagName(“ul”)[0];
root.onmouseover= function(){
self.nextClassify(self.treeRoot,”block”);
}
root.onmouseout = function(){
self.nextClassify(self.treeRoot,”none”);
}
for(var i=0;i<li.length;i++){
li[i].onmouseover = function(){
if(self.isNextClassify(this)){
self.nextClassify(this,”block”);
}
}
li[i].onmouseout = function(){
if(self.isNextClassify(this)){
self.nextClassify(this,”none”);
}
}
}
},

//显示或者隐藏下级分类
nextClassify : function(self,status){
var ul = self.getElementsByTagName(“ul”)[0];
ul.style.display = status;
},

//检查是否有下级分类，如果没有可以选择
isNextClassify : function(li){
var self = this;
if(li.getElementsByTagName(“ul”)[0]){
return true;
}else{
li.getElementsByTagName(“span”)[0].onclick = function(){//绑定选择事件
self.btn.value = this.alt;
self.btnText.value = this.innerHTML;
//document.getElementById(“cid2”).value = self.titlePlace;//绑定到保存草稿input
self.nextClassify(self.treeRoot,”none”);//选择完毕隐藏
}
return false;
}
},

init : function(){
this.setDomTree();
this.seekClassify();
this.bindHover();
}
}

classifySelect.init();

</script>
</html>

JS分类选择插件

deee

相关推荐

评论抢沙发

评论前必须登录！

deee

相关推荐

评论 抢沙发

评论前必须登录！

评论抢沙发