个人写的一个原生加JQ的选择功能，选择完添加到数组

最新推荐文章于 2024-10-01 20:12:28 发布

湫兮如风01

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量83

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_48070278/article/details/123903543

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script> -->
		<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
	</head>
	<style type="text/css">
		.eight {
			width: 100%;
			display: flex;
			justify-content: space-between;
			flex: 1;
		}
		.eight div {
			width: 40px;
			height: 40px;
			border: 2px solid #009FB5;
			border-radius: 50%;
			line-height: 36px;
			text-align: center;
			background: white;
			cursor: pointer;
			transition: background-color 200ms linear !important;
			color: #009FB5;
			font-size: 14px;
		}
	</style>
	<body>
		<div class="eight">
			<div class="she">1</div>
			<div class="she">2</div>
			<div class="she">3</div>
			<div id="selAll">全选</div>
		</div>
		<script type="text/javascript">
			var arr = [];
			$(function() {
				$('.eight .she').click(function() {
					let text = $(this).text();
					let ind = arr.indexOf(text);

					if (ind === -1) {
						arr.push(text);
						console.log(arr)
						this.style.background = '#009fb5';
						this.style.color = 'white'
					} else {
						arr.splice(ind, 1);
						$(this).removeClass('active');
						this.style.background = "";
						this.style.color = '#009fb5'
						console.log(arr)
					}
					/*位置不可改变*/
					if (arr.length == 3) {
						$("#selAll").css({
							'background': "#009fb5",
							'color': "white"
						})
					} else {
						$("#selAll").css({
							'background': "white",
							'color': "#009fb5"
						})
					}
					arr = arr.sort()
				})
				$('#selAll').on('click', function() {
					if (arr.length < 3) {
						arr.splice(0, arr.length)
						$(".eight .she").css({
							'background': "#009fb5",
							'color': "white"
						})
						$("#selAll").css({
							'background': "#009fb5",
							'color': "white"
						})
						$(function() {
							$(".eight .she").each(function(index, item, array) {
								arr.push($(this).html())
							})
							console.log(arr)
							arr = arr.sort()
						})
					} else {
						$(".eight .she").css({
							'background': "white",
							'color': "#009fb5"
						})
						$("#selAll").css({
							'background': "white",
							'color': "#009fb5"
						})
						arr.splice(0, arr.length)
						console.log(arr)
						arr = arr.sort()
					}
				})

			})
		</script>
	</body>
</html>