tag标签添加删除并把值存入到一个input的value内

html:

<input type="text" id="tagValue" style="display: none;" />
                        <div class="gametag_checked"></div>
                        <div class="gametag_box">
                            <em name ="em1">RGB</em>
                            <em name ="em2">网游</em>
                            <em name ="em3">RGB1</em>
                            <em name ="em4">网游1</em>
                            <em name ="em5">RGB2</em>
                            <em name ="em6">网游2</em>
                        </div>

 

css:

.gametag_checked{
    height: 25px;
}
.gametag_checked em{
    display:inline-block;
    width: 50px;
    height: 25px;
    margin-right: 14px;
    text-align: center;
    line-height: 25px;
    background: #8d8d8d;
    color: #ffffff;
    cursor: pointer;
}
.gametag_box{
    width: 359px;
    height: 114px;
    border: 1px #d8d8d8 solid;
    margin: 15px 0 0 150px;
}
.gametag_box em{
    display:inline-block;
    width: 50px;
    height: 25px;
    margin:14px 0 0 14px;
    text-align: center;
    line-height: 25px;
    border: 1px #d8d8d8 solid;
    color: #4a4237;
    background: #ffffff;
    cursor: pointer;
}

js:

$('.gametag_box em').each(function(index,element){
                $(element).click(function(){
                   addTag(element)
                });
            });

function deleteTag(_this){
               var obj = $(_this);
               var deletValue = obj.text();
               var deletName = obj.attr("name");
               obj.hide();
                var targetObj = $(".gametag_box em[name='"+deletName+"']");
               targetObj.bind("click",function(){
                   addTag(targetObj);
               });
               var objval = $("#tagValue").val();
               var valusArray = objval.split(",");
               for(var i=0;i<valusArray.length;i++){
                   var value =     valusArray[i];
                   if(value==deletValue) {
                       valusArray.splice(i,1);
                   }
               }
             var newValue =  valusArray.join(",");
             $("#tagValue").val(newValue);

        }

        function addTag(_this){
                    var thisValue = $(_this).text();
                    var thisName =     $(_this).attr("name");
                    $('.gametag_checked').append("<em onclick='deleteTag(this)' name='"+thisName+"'>"+thisValue+"</em>");
                    var txbTag = document.getElementById("tagValue");
                    if (txbTag.value == '') {
                        txbTag.value += thisValue;
                    }
                    else {
                        txbTag.value += "," + thisValue;
                    }
                    $(_this).unbind('click');
            }

 

posted @ 2016-05-12 10:58  djdliu  阅读(552)  评论(0编辑  收藏  举报