纯手写点击选中返回参数插件

最新推荐文章于 2024-06-18 08:06:56 发布

竹亦叶同

最新推荐文章于 2024-06-18 08:06:56 发布

阅读量199

点赞数

分类专栏： h5

本文链接：https://blog.youkuaiyun.com/deja_vu_n/article/details/105014096

版权

h5 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种通过点击按钮触发的数据选择交互过程，详细解释了如何使用jQuery实现弹出框展示数据列表，并允许用户选择特定数据项。选择的数据将被收集并返回至页面上进行显示，展示了从前端数据展示到用户交互及数据处理的完整流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

点击数据，打开下面这个弹出框，选择参数返回参数到页面上
在这里插入图片描述

	<div class="q-btn">
			数据
			<div class="q-contentlabel">

			</div>
		</div>

		<div class="q-modal">
			<div class="modal-content">
				<div class="modal-list">
					<div class="modal-left">
						①数据：
					</div>
					<div class="modal-right q-datas" id="getdata">
						<span>数据1</span>
						<span>数据2</span>
						<span>数据3</span>
						<span>数据4</span>
						<span>数据5</span>
						<span>数据6</span>
					</div>
				</div>
				<div class="modal-list">
					<div class="modal-left">
						②数据：
					</div>
					<div class="modal-right q-datas" id="getdata2">
						<span>数据7</span>
						<span>数据8</span>
						<span>数据9</span>
						<span>数据10</span>
						<span>数据11</span>
						<span>数据12</span>
					</div>
				</div>
				<div class="q-sure">
					<button class="q-submit" type="button">确定</button>
				</div>
			</div>
		</div>

			.q-btn {
				font-size: 18px;
			}

			.q-modal {
				position: fixed;
				bottom: 0;
				left: 0;
				margin: 0;
				padding: 0;
				height: 100%;
				width: 100%;
				z-index: 999;
				background-color: rgba(0, 0, 0, 0.3);
				display: none;
				border-top: 1px solid #e2e2e2;
			}

			.modal-content {
				width: 100%;
				height: 70%;
				position: absolute;
				top: 30%;
				background-color: #fff;
				padding: 1rem 0;
				overflow-y: scroll;
			}

			.modal-left {
				position: absolute;
				width: 72px;
				text-align: right;
			}

			.modal-right {
				padding-left: 72px;
				overflow: auto;
			}

			.modal-right span {
				font-size: 12px;
				background: #f0f0f0;
				text-align: center;
				width: 68px;
				line-height: 30px;
				display: block;
				float: left;
				margin: 2px 0px 2px 5px;
				padding: 0;
				height: 30px;
			}

			.q-active {
				background: #ff662c !important;
				color: #fff;
			}

			.modal-list {
				padding: 5px 0;
				width: 100%;
			}

			.q-sure {
				width: 100%;
				clear: both;
				text-align: center;
				margin-top: 20px;
			}

			.q-sure button {
				background-color: #FF662C;
				color: #fff;
				border: none;
				padding: 7px 10px;
				width: 40%;
				border-radius: 2px;
				letter-spacing: 2px;
				font-size: 16px;
			}

			.q-contentlabel {}

			.q-contentlabel span {
				font-size: 12px;
				background: #f0f0f0;
				text-align: center;
				width: 68px;
				line-height: 30px;
				display: block;
				float: left;
				margin: 2px 0px 2px 5px;
				padding: 0;
				height: 30px;
			}

		$(function() {
			$('.q-btn').click(function() {
				$('.q-modal').show()
			})
			$('.q-datas span').click(function() {
				if ($(this).hasClass('q-active')) {
					$(this).removeClass('q-active')
				} else {
					$(this).addClass('q-active')
				}
			})
			$('.q-submit').click(function() {
				var datas = ''
				for (i = 0; i < $("#getdata").children('span').length; i++) {
					if ($("#getdata").children('span').eq(i).hasClass('q-active')) {
						datas += $("#getdata").children('span').eq(i).html() + ','
					}
				}
				console.log(datas)
				var datas2 = ''
				for (i = 0; i < $("#getdata2").children('span').length; i++) {
					if ($("#getdata2").children('span').eq(i).hasClass('q-active')) {
						datas2 += $("#getdata2").children('span').eq(i).html() + ','
					}
				}
				console.log(datas2)
				var mydatas = datas + datas2
				console.log('所有的数据', mydatas)
				var strs = new Array();
				strs = mydatas.split(",")
				var mystrs = ''
				for (i = 0; i < strs.length-1; i++) {
					console.log(strs[i])
					mystrs += '<span>' + strs[i] + '</span>'
				}
				$('.q-contentlabel').html(mystrs)
				$('.q-modal').hide()

			})
		})