Jquery 点击弹窗,将弹窗内容赋值到各个项demo
阅读原文时间:2023年07月09日阅读:1
会议室:区政府中一楼会议室
  • 地板、地毯
    请填入检查情况
  • 贵宾室沙发
    请填入检查情况
  • 椅套
    请填入检查情况
  • 窗帘
    请填入检查情况
  • 空调
    请填入检查情况
  • 灯光
    请填入检查情况
  • 桌椅
    请填入检查情况
  • 音控设备
    请填入检查情况
  • 茶杯
    请填入检查情况
  • 台布
    请填入检查情况
<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>