部分界面

添加标签--小结

逻辑梳理:

  • 点击元素添加:绑定事件--》获取对应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();
            });
        }

 

 

相关文章: