Darse cuenta del efecto:
Lógica de código:
Primero use el método hasClass() para determinar si la etiqueta en la que se hizo clic ya existe en el cuadro. Si la etiqueta ya existe en el cuadro, use el método removeClass() para eliminar el nombre de clase 'activo' de la etiqueta y use el método filter() para encontrar el elemento en el cuadro con el mismo texto que la etiqueta en la que se hizo clic y use el método remove() para eliminarlo remove;
Si la etiqueta no existe en el cuadro, agregue el nombre de clase 'activo' de la etiqueta usando el método addClass() y use $('
') para crear una nueva
y use el método text() para establecer su contenido de texto como el texto de la etiqueta en la que se hizo clic y, finalmente, use el método appendTo() para agregar el elemento recién creado
Los elementos se agregan a la caja.
Código:
<!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>