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;
50px;
height: 25px;
margin-right: 14px;
text-align: center;
line-height: 25px;
background: #8d8d8d;
color: #ffffff;
cursor: pointer;
}
.gametag_box{
359px;
height: 114px;
border: 1px #d8d8d8 solid;
margin: 15px 0 0 150px;
}
.gametag_box em{
display:inline-block;
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');
}