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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

<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>