部分界面
逻辑梳理:
- 点击元素添加:绑定事件--》获取对应id值对应的元素--》判断元素是否存在,存在的话终止操作,不存在的话添加标签元素到存放数组中,循环数组,构造dom元素,设置到标签存放位置。
- 输入框添加:绑定按钮事件--》获取输入内容--》判断元素是否存在......
部分代码
e_addtags:function(tid,flag){
var __t=this;
var id=Xl.sgData(tid,'id');//data-id属性的值
var tag=$('.label_wrap').get(id-1).innerHTML;//标签内容
var str='';
Xl.forIn(LouObj.tags,function (i,v) {
if(tag==v){
flag=false;//存在标签,不用添加
return;
}else{
flag=true;
}
});//LouObj.tags全局变量,是一个数组,存放加入的标签
if( LouObj.tags.length<4&&flag==true){
LouObj.tags.push(tag);
Xl.forIn(LouObj.tags,function (i,v) {
str +='<span class="label_info" data-id="'+i+'">'+ v + '<span class="label-delete">×</span></span>'
});//构造标签dom
$('.label_save').html(str);//追加dom
}
__t.deleteTags();
}
deleteTags:function(){
$('.label_info .label-delete').click(function () {
var name=$(this).parent().text();
name=name.substr(0,name.length-1);
Xl.forIn(LouObj.tags,function (i,v) {
if (v==name){
var index = LouObj.tags.indexOf(v);
if (index > -1) {
LouObj.tags.splice(index, 1);
}//存在索引,删除此元素
}
});
$(this).parent().remove();
});
}