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>
本文来自博客园,作者:WantRemake,转载请注明原文链接:https://www.cnblogs.com/SmallChen/p/16785028.html