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');
}
tag标签添加删除并把值存入到一个input的value内的更多相关文章
- jquery 学习(四) - 标签 添加/删除/修改
HTML代码 <div class="a1"> <div> <span id="a2">aaa</span> & ...
- JavaScript学习 - 基础(八) - DOM 节点 添加/删除/修改/属性值操作
html代码: <!--添加/删除/修改 --> <div id="a1"> <button id="a2" onclick=&q ...
- JS判断是不是本页面并且,给标签添加属性和属性值
大多是在导航栏中用到的,在导航栏中在主页和在其他的网页点击导航栏中的主页是不同的,主要就是判断这个. 我是在ascs页面中写的. 下面先看标签: <a href="http://www ...
- select选中的值改变另一个input的值
HTML: <select id="hhh" onchange="aa()"><option value="11"> ...
- JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;
JavaScript Dom基础 学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌 ...
- DHTMLX 前端框架 建立你的一个应用程序 教程(十一)--添加/删除表格中的记录
添加/删除表格中的记录 我们的最终功能是在表格中添加删除 我们通过单机工具栏上的按钮来实现添加删除 当我们单击添加按钮的时候, 表单中 第一行默认填写New contact 光标自动聚焦 当用户点击删 ...
- tag标签记录
看到项目代码中有一个自定义的tag标签,想起以前自己写过的标签,竟然忘记的差不多了,手一痒,自己写个简单的tag标签,回顾一下历史知识 首先建一个servlet工程,然后写个index.jsp,项目跑 ...
- 动态添加删除网卡 - 每天5分钟玩转 OpenStack(156)
这是 OpenStack 实施经验分享系列的第 6 篇. 在项目实施过程中,经常会有添加删除网卡的需求.比如一个运行数据库的 instance,初始只有一个网卡,数据库服务和备份共用这块网卡,后来为提 ...
- Ansible触发器-tag标签-忽略错误
触发器 playbook handlers handler`用来执行某些条件下的任务,比如当配置文件发生变化的时候,通过notify触发handler去重启服务. 在saltstack中也有类似的触发 ...
随机推荐
- 【线段树】【4-6组队赛】Problem H
Problem Description #include <iostream> #include <algorithm> using namespace std; int n, ...
- 业务需求那些事,使用WCF如何实现业务需求!
最近遇到一个新项目,需要与硬件结合,进行读取信息并保存在数据库中.业务要求也在昨天发布一个问题,当然感谢许多园内的朋友出谋划策,截图有真相! 关于这个问题,我做了如下假设.目前处于测试状态,代码比较简 ...
- html系列教程--DOCTYPE a area
<!DOCTYPE>标签:<!DOCTYPE> 声明不是 HTML 标签:它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令.在 HTML 4.01 中,& ...
- CSS的“层叠”规则的总结
当你随机打开一个页面,查看源代码,你会发现,同一个元素,不止有一个CSS选择器及对应的样式.而一个元素只能应用一个样式,那么一堆样式中究竟是应用哪一个呢?这就涉及到CSS的层叠规则了.下面就来总结下C ...
- git SSh key多个key对应多个项目
必看 1. 本文不教你怎么生成key,主要解决多个项目对应多个SSH KEY的问题,在csdn code库上遇到的人估计很苦恼,为什么多个项目不能用一个key,为什么添加相同的key就会报重复 2. ...
- 并发编程: c++11 thread(Func, Args...)利用类成员函数创建线程
c++11是VS2012后支持的新标准,为并发编程提供了方便的std::thread. 使用示例: #include <thread> void thread_func(int arg1, ...
- 幻世(OurDream)2D图形引擎大更新——炫丽粒子特效强势回归!
本次更新终于让各位期待已久的绚丽粒子系统特效强势回归到幻世当中了.凭借新引擎强大而又高效的绘图,新的粒子系统将比旧有版本(原Ycnd 2D)在性能上有极大幅度的增强,增幅超过十倍! 更强的性能!更好的 ...
- Python进阶之decorator装饰器
decorator装饰器 .note-content {font-family: "Helvetica Neue",Arial,"Hiragino Sans GB&quo ...
- mysql函数操作(6)
<?php try{ $dbh = new PDO('mysql:dbname=testdb;host=localhost', 'mysql_user', 'mysql_pwd'); }catc ...
- Android TextView文字超出一屏不能显示其它的文字 解决方案
在android上面让TextView 过多的文字实现有滚动条,之前想简单了以为设置TextView的属性就可以实现,结果还是需要ScrollView配合使用,才能达到滚动条的效果有两种方式实现, 一 ...