js 标签选择与移除 个人经验分享

    xiaoxiao2021-12-12  2

    点击 + 号 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') }); 效果图见解:

    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的小伙伴 开心 

    转载请注明原文地址: https://ju.6miu.com/read-900179.html

    最新回复(0)