Fork me on GitHub

Jquery 点击弹窗,将弹窗内容赋值到各个项demo

<div class="qb">
		<div class="box">
			<div class="qtt f_16 fbd">会议室:区政府中一楼会议室</div>
			<ul class="ul1">
				<li>
					<div class="llt">地板、地毯</div>
					<div class="lrt">请填入检查情况</div>
				</li>
				<li>
					<div class="llt">贵宾室沙发</div>
					<div class="lrt">请填入检查情况</div>
				</li>
				<li>
					<div class="llt">椅套</div>
					<div class="lrt">请填入检查情况</div>
				</li>
				<li>
					<div class="llt">窗帘</div>
					<div class="lrt">请填入检查情况</div>
				</li>
				<li>
					<div class="llt">空调</div>
					<div class="lrt">请填入检查情况</div>
				</li>
				<li>
					<div class="llt">灯光</div>
					<div class="lrt">请填入检查情况</div>
				</li>
				<li>
					<div class="llt">桌椅</div>
					<div class="lrt">请填入检查情况</div>
				</li>
				<li>
					<div class="llt">音控设备</div>
					<div class="lrt">请填入检查情况</div>
				</li>
				<li>
					<div class="llt">茶杯</div>
					<div class="lrt">请填入检查情况</div>
				</li>
				<li>
					<div class="llt">台布</div>
					<div class="lrt">请填入检查情况</div>
				</li>
			</ul>
		</div>
	</div>

	<div class="sc_btn f_16" onclick="uploadData()">上传</div>

	<div class="xz_tanchuang">
		<div class="xox">
			<div class="xtt f_16 fbd">填入检查情况</div>
			<ul class="ul1">
				<li> <div class="yuan"><s></s></div> <div class="wz">正常</div> </li>
				<li> <div class="yuan"><s></s></div> <div class="wz">无此设备</div> </li>
				<li> <div class="yuan"><s></s></div> <div class="wz">异常</div> </li>
			</ul>
			<div class="dy">
				<div class="dtt">异常描述:</div>
				<textarea placeholder="请输入详细描述" id="desCon"></textarea>
			</div>

			<div class="anniu">
				<div class="btn fh">返回</div>
				<div class="btn tj">提交</div>
			</div>
		</div>
	</div>

    <script src="/js/jquery-3.5.1.min.js"></script>
	<script type="text/javascript">
		//确定点击项下表
		var curIndex = 1;
        $('.qb .ul1 li').on('click', function () {
			var idx = $(this).index();
			curIndex = curIndex + idx;
		})

		// 数据输入
		$('.qb .ul1 li .lrt').on('click',function(){
			$('.xz_tanchuang').fadeIn();
            $('.xz_tanchuang .xox .dy').stop(true, false).hide();
		})
	    
		// 选项
		$('.xz_tanchuang .xox .ul1 li').on('click',function(){
			var idx=$(this).index();
			$(this).stop(true,false).addClass('act').siblings().stop(true,false).removeClass('act');
			if(idx==2){
				$('.xz_tanchuang .xox .dy').stop(true,false).show();
			} else {
				if (idx == 0) {
					$("#desCon").val('正常');
                } else if (idx == 1) {
                    $("#desCon").val('无此设备');
                }
				$('.xz_tanchuang .xox .dy').stop(true,false).hide();
			}
		})

		// 返回按钮
		$('.xz_tanchuang .xox .anniu .fh').on('click', function () {
			$("#desCon").val('');
            curIndex = 1;
			$('.xz_tanchuang').fadeOut();
            $(".xz_tanchuang .xox .ul1 li").removeClass('act');
		})

		//提交按钮
		$('.xz_tanchuang .xox .anniu .tj').on('click', function () {
			$(".qb .ul1 li:nth-child(" + curIndex + ") .lrt").text($("#desCon").val());
			$(".qb .ul1 li:nth-child(" + curIndex + ") .lrt").addClass('act');
			$("#desCon").val('');
			curIndex = 1;
			$('.xz_tanchuang').fadeOut();
            $(".xz_tanchuang .xox .ul1 li").removeClass('act');
		})

		//数据提交
		function uploadData() {
            var compleData = "[";
			var alertMsg = "";
			$(".qb .ul1 li").each(function () {
				if ($(this).children(1).text().length == 0 || $(this).children(1).text().indexOf('请填入检查情况') != -1) {
					alertMsg = (alertMsg + $(this).children('div').eq(0).text() + "、");
				} else {
                    compleData += '{"name":"' + ($(this).children('div').eq(0).text()) + '","value":"' + $(this).children('div').eq(1).text() + '"},';
				}
			});
			if (alertMsg.length != 0) {
				compleData = "";
				alert(alertMsg.substring(0, alertMsg.length-1) + "不能为空");
				return;
			} else {
				compleData = compleData.substring(0, compleData.length - 1);
                compleData += "]";
				console.log(compleData);
			}
		}
    </script>

  

posted @ 2022-10-12 16:38  WantRemake  阅读(13)  评论(0编辑  收藏  举报