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

最新推荐文章于 2025-09-19 07:48:27 发布

原创最新推荐文章于 2025-09-19 07:48:27 发布 · 4.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #标签 #span

js(jquery) 专栏收录该内容

3 篇文章

订阅专栏

本文分享了使用JS进行标签选择与移除的操作经验，包括点击+号展示和隐藏div，以及点击div内标签实现移除功能。对于初入编程的开发者，作者强调兴趣的重要性，并鼓励在编程行业中坚持下去，同时不忘规划和梦想。

点击 + 号 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的小伙伴开心