js 标签选择与移除 个人经验分享
2016-11-15 17:28
351 查看
点击 + 号 div显示
再次点击 + 号(或者点击空白处) div隐藏
$("#addSign").click(function(){
$('.add_list').toggle();
});
$(document).bind("click",function(e){
var target = $(e.target);
if(target.closest(".add_list,#addSign").length == 0){
$(".add_list").hide();
};
e.stopPropagation();
});
点击选中的li标签 移到div里
点击div里的标签 移除
js例子:
$('.activitySign li').click(function () {
var num=$('#signContent').children('span').length;
if(num<5){
var id=$(this).index();
var name = $(this).find($("a")).html();
var con = $('#signContent').html();
if((con.indexOf('<span class="list_active" name="tag[]" id="'+id+'">'+name+'</span>'))!=-1){
return;
}else{
$('#signContent').append('<span class="list_active" name="tag[]" id="'+id+'">'+name+'</span>')
}
}else{
alert('您最多添加5个标签')
}
})
$(document).on("click","#signContent span",function(){
var id=$(this).attr('id');
$('#signContent span[id='+id+']').remove();
//$(this).attr('id','al_name').appendTo('.tag-box')
});
效果图见解:
![](https://img-blog.csdn.net/20161115171748646?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
html 内容:
<div class="product_type_right Left">
<div class="quan_jia_icon Left">
<img src="images/quan_jia_icon.png" id="addSign"/>
</div>
<div class="Left" id="signContent"></div>
<div class="pai_biao_icon Left">
<img src="images/pai_biao_icon-09.png"/>
</div>
</div>
样式有点乱 就不整理了。
刚做程序员不久的小伙伴 有没有觉得编程是一件还算有点意思的事情???
其实 不管从事哪一行 兴趣是你在这个行业长期做下去的不二法门
千万不要讲你对编程烦透了 看在钱的面子上 也得趁着还单身 很穷 没衣品的年纪 也应该在这个行业做上几年
以后的事情谁说的准呢
但是不管你在做什么
规划、梦想这东西还是不能丢
好了 我要继续码代码咯
愿各位来到本csdn的小伙伴 开心
![](http://static.blog.csdn.net/xheditor/xheditor_emot/default/smile.gif)
再次点击 + 号(或者点击空白处) div隐藏
$("#addSign").click(function(){
$('.add_list').toggle();
});
$(document).bind("click",function(e){
var target = $(e.target);
if(target.closest(".add_list,#addSign").length == 0){
$(".add_list").hide();
};
e.stopPropagation();
});
点击选中的li标签 移到div里
点击div里的标签 移除
js例子:
$('.activitySign li').click(function () {
var num=$('#signContent').children('span').length;
if(num<5){
var id=$(this).index();
var name = $(this).find($("a")).html();
var con = $('#signContent').html();
if((con.indexOf('<span class="list_active" name="tag[]" id="'+id+'">'+name+'</span>'))!=-1){
return;
}else{
$('#signContent').append('<span class="list_active" name="tag[]" id="'+id+'">'+name+'</span>')
}
}else{
alert('您最多添加5个标签')
}
})
$(document).on("click","#signContent span",function(){
var id=$(this).attr('id');
$('#signContent span[id='+id+']').remove();
//$(this).attr('id','al_name').appendTo('.tag-box')
});
效果图见解:
html 内容:
<div class="product_type_right Left">
<div class="quan_jia_icon Left">
<img src="images/quan_jia_icon.png" id="addSign"/>
</div>
<div class="Left" id="signContent"></div>
<div class="pai_biao_icon Left">
<img src="images/pai_biao_icon-09.png"/>
</div>
</div>
<div class="shape_sub list_sub Both activityFormat"> <span class="Left">活动形式:<span>*</span></span> <li class="list_active"><a href="javascript:;">会议</a></li> <li><a href="javascript:;">展览</a></li> <li><a href="javascript:;">论坛</a></li> <li><a href="javascript:;">课程</a></li> <li><a href="javascript:;">讲座</a></li> <li><a href="javascript:;">沙龙</a></li> <li><a href="javascript:;">聚会</a></li> <li><a href="javascript:;">市集</a></li> <li><a href="javascript:;">派对</a></li> <li><a href="javascript:;">赛事</a></li> <li><a href="javascript:;">分享会</a></li> <li><a href="javascript:;">公开课</a></li> <li><a href="javascript:;">音乐节</a></li> <li><a href="javascript:;">音乐会</a></li> <li><a href="javascript:;">演唱会</a></li> <li><a href="javascript:;">首映会</a></li> <li><a href="javascript:;">开幕式</a></li> <li><a href="javascript:;">发布会</a></li> </div>
样式有点乱 就不整理了。
刚做程序员不久的小伙伴 有没有觉得编程是一件还算有点意思的事情???
其实 不管从事哪一行 兴趣是你在这个行业长期做下去的不二法门
千万不要讲你对编程烦透了 看在钱的面子上 也得趁着还单身 很穷 没衣品的年纪 也应该在这个行业做上几年
以后的事情谁说的准呢
但是不管你在做什么
规划、梦想这东西还是不能丢
好了 我要继续码代码咯
愿各位来到本csdn的小伙伴 开心
![](http://static.blog.csdn.net/xheditor/xheditor_emot/default/smile.gif)
相关文章推荐
- js压缩工具经验分享
- SOA365 个人技术经验分享 个人软件产品展示 精华文章 原创文章 技术交流 技术分享
- WinForm"仿js星形评分效果"控件制作经验分享(原创) 之配餐系统的开发
- 转载:分享:A 标签中的target用js实现链接 百度空间_应用平台
- 分享8年开发经验,浅谈个人发展经历,明确自己发展方向 推荐
- JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参(selected的值和页面其它元素的值)以及js的select
- Jquery插件制作经验分享 之 json字符串转换插件(附:jQuery.Json.js)
- 用wordpress打造自己个人技术博客全过程(经验分享)
- 分享8年开发经验,浅谈个人发展经历,明确自己发展方向
- 个人多年web架构设计实践的经验分享
- 架构师成长之路-个人学习经验分享(公司研发峰会演讲ppt)
- 架构师成长之路-个人学习经验分享(公司研发峰会演讲ppt)
- Jquery插件制作经验分享 之 json字符串转换插件(附:jQuery.Json.js)
- JS效率个人经验谈
- 个人博客选择原则及zblog修改经验谈 转载
- 架构师成长之路-个人学习经验分享(公司研发峰会演讲ppt)
- 分享我的个人电子商务创业路成功经验
- 分享~纯个人经验!NAS的小学问
- 类似评论、点评的JS标签选择功能