jq实现网站-点击标签,添加到一个盒子中,再次点击去掉该标签

实现效果:

在这里插入图片描述

代码逻辑:

首先使用hasClass()方法判断点击的标签是否已经存在于盒子中。如果标签已经存在于盒子中,则使用removeClass()方法移除标签的’active’类名,并使用filter()方法找到盒子中与点击的标签文本相同的元素,并使用remove()方法将其移除;

如果标签不存在于盒子中,则使用addClass()方法添加标签的’active’类名,并使用$(‘

’)创建一个新的
元素,并使用text()方法设置其文本内容为点击的标签文本,最后使用appendTo()方法将新创建的
元素添加到盒子中。

文章来源地址https://uudwc.com/A/9LYn3

代码实现:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="html/js/jquery.min.js"></script>  //引入juery库
		<style>
			.bidbox {
				border: 1px solid #000;
				width: 500px;
				margin-bottom: 30px;
			}

			.labelbox {
				background-color: beige;
				display: flex;
				align-items: center;
				justify-content: flex-start;
			}

			.labelbox div {
				margin-right: 10px;
				background: dodgerblue;
				padding: 5px;
				color: #fff;
			}

			.container {
				display: flex;
				align-items: center;
			}

			.container .tag {
				background: dodgerblue;
				color: #fff;
				margin-right: 10px;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div class="bidbox">
			<p>选中的标签:</p>
			<div class="labelbox">
				<!-- 这里是添加的标签 -->
			</div>
		</div>

		<p>点击以下标签进行选择:</p>
		<div class="container">
			<div class="tag">标签1</div>
			<div class="tag">标签2</div>
			<div class="tag">标签3</div>
			<div class="tag">标签4</div>
		</div>
	</body>
	<script>
		$(document).ready(function() {
			$('.tag').click(function() {
				var tag = $(this).text(); // 获取点击的标签的文本

				if ($(this).hasClass('active')) {
					// 如果标签已经存在于盒子中,则从盒子中移除该值
					$(this).removeClass('active');
					$('.labelbox').children().filter(function() {
						return $(this).text() === tag;
					}).remove();
				} else {
					// 如果标签不存在于盒子中,则将其添加到盒子中
					$(this).addClass('active');
					$('<div>').text(tag).appendTo('.labelbox');
				}
			});
		});
	</script>
</html>

完成!

原文地址:https://blog.csdn.net/weixin_48596030/article/details/131738612

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请联系站长进行投诉反馈,一经查实,立即删除!

h
上一篇 2023年07月16日 06:10
下一篇 2023年07月16日 06:10