摘要:这是我要工作中想要使用的一个案例,和老师讲的好像,我试 了一下有一个问题没有解决,就是 点击同类中另一个类,先点中的要从文本域中消失没有实现。老师看看问题在哪里。我的意思是说我点击了项目补助后又点击了负责人奖金,但项目补助没有消失,这怎么办,没有调出来。<!DOCTYPE html> <html> <head> &nbs
这是我要工作中想要使用的一个案例,和老师讲的好像,我试 了一下有一个问题没有解决,就是 点击同类中另一个类,先点中的要从文本域中消失没有实现。老师看看问题在哪里。
我的意思是说我点击了项目补助后又点击了负责人奖金,但项目补助没有消失,这怎么办,没有调出来。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>仿选中效果</title>
<link rel="shortcut icon" href="static/images/logo.png" type="image/x-icon" />
<link rel="stylesheet" href="static/css/style.css" type="text/css">
<script type="text/javascript" src="static/js/jquery.js"></script>
<script type="text/javascript">
$(function() {
$('span').click(function(){
//设置文本变量
var this_text = $(this).text();
var $content = $('#content');
var content_text = $(content).val();
//console.log(content_text);
//console.log(this_text);
//判断是否被选中
if($(this).hasClass('check')){
//选中则删除check类
$(this).removeClass('check')
//textare内容替换为空格
content_text = content_text.replace(new RegExp('(\\s'+this_text+')\|('+this_text+'\\s)\|'+this_text,'g'), '')
}else{
$(this).addClass('check').siblings('span').removeClass('check')
if(content_text.length===0){
content_text = this_text
}else{
content_text = content_text + ' ' + this_text
}
}
$content.val(content_text)
})
})
</script>
</head>
<body>
<div class="top">请选择信息后加入文本域中</div>
<div class="main">
<p class="p1">
<b style="border:0px;">奖金类型</b>
<span id="sp0" class="ed" name="0" value="项目补助">项目补助</span>
<span id="sp1" class="ed" name="0" value="负责人奖金">负责人奖金</span>
<span id="sp2" class="ed" name="0" value="助理奖金">助理奖金</span>
</p>
<p class="p2">
<b style="border:0px;">奖金级别</b>
<span id="sp3" class="co" name="0">一级</span>
<span id="sp4" class="co" name="0">二级</span>
<span id="sp5" class="co" name="0">三级</span>
</p>
<p class="p8">
<b style="border:0px;">数量</b>
<input type="text" value="1" style="width:40px;height:26px;">
</p>
<p style="margin-top:30px;margin-left:95px;">
<textarea id="content" cols="40" rows="5"></textarea>
</p>
</div>
</body>
</html>
批改老师:灭绝师太批改时间:2019-02-22 13:31:22
老师总结:选中的时候取值, 反选的时候把相应的值删掉