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'); }
耐得住寂寞,守得住繁华