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');
}

tag标签添加删除并把值存入到一个input的value内的更多相关文章

  1. jquery 学习(四) - 标签 添加/删除/修改

    HTML代码 <div class="a1"> <div> <span id="a2">aaa</span> & ...

  2. JavaScript学习 - 基础(八) - DOM 节点 添加/删除/修改/属性值操作

    html代码: <!--添加/删除/修改 --> <div id="a1"> <button id="a2" onclick=&q ...

  3. JS判断是不是本页面并且,给标签添加属性和属性值

    大多是在导航栏中用到的,在导航栏中在主页和在其他的网页点击导航栏中的主页是不同的,主要就是判断这个. 我是在ascs页面中写的. 下面先看标签: <a href="http://www ...

  4. select选中的值改变另一个input的值

    HTML: <select id="hhh" onchange="aa()"><option value="11"> ...

  5. JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;

    JavaScript Dom基础 学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌 ...

  6. DHTMLX 前端框架 建立你的一个应用程序 教程(十一)--添加/删除表格中的记录

    添加/删除表格中的记录 我们的最终功能是在表格中添加删除 我们通过单机工具栏上的按钮来实现添加删除 当我们单击添加按钮的时候, 表单中 第一行默认填写New contact 光标自动聚焦 当用户点击删 ...

  7. tag标签记录

    看到项目代码中有一个自定义的tag标签,想起以前自己写过的标签,竟然忘记的差不多了,手一痒,自己写个简单的tag标签,回顾一下历史知识 首先建一个servlet工程,然后写个index.jsp,项目跑 ...

  8. 动态添加删除网卡 - 每天5分钟玩转 OpenStack(156)

    这是 OpenStack 实施经验分享系列的第 6 篇. 在项目实施过程中,经常会有添加删除网卡的需求.比如一个运行数据库的 instance,初始只有一个网卡,数据库服务和备份共用这块网卡,后来为提 ...

  9. Ansible触发器-tag标签-忽略错误

    触发器 playbook handlers handler`用来执行某些条件下的任务,比如当配置文件发生变化的时候,通过notify触发handler去重启服务. 在saltstack中也有类似的触发 ...

随机推荐

  1. C#数据绑定中,时间为空时显示时间为原始日期问题

    这个问题一般出现在用实体时,实体的时间格式没有加?号.加了之后就默认为空,没有数据时不会为原始时间了.

  2. Gulp插件汇总

    HTML&CSS autoprefixer - parse CSS and add vendor prefixes to rules by Can I Use. gulp-browser-sy ...

  3. oracle误删除数据的恢复方法

    学习数据库时,我们只是以学习的态度,考虑如何使用数据库命令语句,并未想过工作中,如果误操作一下,都可能导致无可挽回的损失.当我在工作中真正遇到这些问题时,我开始寻找答案. 今天主要以oracle数据库 ...

  4. HttpServletRequest 各种方法总结(转自百度经验)

    HttpServletRequest对象代表客户端的请求,当客户端通过HTTP协议访问服务器时,HTTP请求头中的所有信息都封装在这个对象中,开发人员通过这个对象的方法,可以获得客户这些信息. req ...

  5. CGI version1.1-第一章 介绍 (译)

    CGI version1.1-第一章 介绍 1.简介 1.1 用途 CGI 是为 HTTP服务器 与 CGI脚本 在 响应客户端请求分配职责, 客户请求由url,方法与关于传输协议的附属信息, CGI ...

  6. Android Spinner 下拉列表

    private Spinner spinner ;         private List<String> list ;         private ArrayAdapter< ...

  7. JDBC连接数据库概述

    直接介绍JDBC连接数据库的流程及其原理 创建一个以JDBC连接数据库的程序,包含7个步骤 1.加载JDBC数据库驱动 在连接数据库之前,首先要加载想要连接的数据库的驱动,就是数据库厂商提供的jar包 ...

  8. AndroidManifest.xml配置文件详解

    AndroidManifest.xml配置文件对于Android应用开发来说是非常重要的基础知识,本文旨在总结该配置文件中重点的用法,以便日后查阅.下面是一个标准的AndroidManifest.xm ...

  9. hdu 2828 Lamp 重复覆盖

    题目链接 给n个灯和m个开关, 每个灯可以由若干个开关控制, 每个开关也可以控制若干个灯, 问你能否找到一种开关的状态, 使得所有的灯都亮. 将灯作为列, 然后把每个开关拆成两行, 开是一行, 关是一 ...

  10. log实例

    配置详解见2014.10月篇 log4j的pom.xml <dependency> <groupId>log4j</groupId> <artifactId& ...