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

  

Jquery 点击弹窗,将弹窗内容赋值到各个项demo的更多相关文章

  1. jQuery实现页内查找相关内容

    当需要在页面中查找某个关键字时,一是可以通过浏览器的查找功能实现,二是可以通过前端脚本准确查找定位,本文介绍通过jQuery实现的页面内容查找定位的功能,并可扩展显示查找后的相关信息. 本文以查找车站 ...

  2. 引用POPUI来实现弹窗效果,且弹窗中的内容可以点击事件

    seajs.use(['../js/ui/dialog'],function(){ $('.center-button').bind('click',function(){ var $dlg = $. ...

  3. jqeury点击空白关闭弹窗

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. jquery点击复选框触发事件给input赋值

    体验效果:http://keleyi.com/keleyi/phtml/jqtexiao/31.htm 代码如下: <!DOCTYPE html> <html xmlns=" ...

  5. Day14 Javascript 点击添加出弹窗,取消隐藏弹窗小练习 反选,全选,取消边框

    点击添加出弹窗,取消隐藏弹窗小练习 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta ...

  6. 使用js冒泡实现点击空白处关闭弹窗

    什么是事件冒泡? 如图:在一个对象上触发某类事件(比如单击onclick事件),这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶 ...

  7. jQuery 表单元素取值与赋值方法总结

    一.普通文本框的赋值与取值 1.1.1赋值 <h2>jQuery 表单元素取值与赋值方法总结</h2> <input type="text" clas ...

  8. jQuery 点击显示再次点击隐藏

    <html> <head> <script type="text/javascript" src="/jquery/jquery.js&qu ...

  9. Jquery操作表格多出一个内容行

    目录 前言 需求 如何监听每一行点击,获取点击id 前后端 问题更新,ajax异步带来的问题 废弃使用HTML拼接 前言 我的前端实在是太差劲了,导致Jquery操作表格多出一个内容行,这个功能我都做 ...

  10. PHP+Ajax点击加载更多内容 -这个效果好,速度快,只能点击更多加载,不能滚动自动加载

    这个效果好,速度快,只能点击更多加载,不能滚动自动加载 一.HTML部分 <div id="more"> <div class="single_item ...

随机推荐

  1. 螺旋矩阵II-LeetCode59 考验代码能力

    力扣链接:https://leetcode.cn/problems/spiral-matrix-ii/ 题目 给你一个正整数 n ,生成一个包含 1 到 n2 所有元素,且元素按顺时针顺序螺旋排列的  ...

  2. 【每日一题】【链表or双指针循环条件】2022年2月26日-NC96 判断一个链表是否为回文结构

    描述给定一个链表,请判断该链表是否为回文结构.回文是指该字符串正序逆序完全一致. 思路: public boolean isPail (ListNode head) { ListNode node = ...

  3. FP6397S5 高效、高频同步DC-DC降压变频器IC

    FP6397是一种高效.高频同步DC-DC降压变频器.100%占空比功能提供了低退出操作,延长了便携式系统的电池寿命. 内部同步开关提高了效率,并消除了对外部肖特基二极管的需要.在停机模式下,输入电源 ...

  4. MongoDB海量数据分页查询优化

    MongoDB海量数据分页查询优化 一.背景 大量数据需从Mongo拿出来,一次性拿出来不科学,传统分页效率低下 二.传统方案 就是最常规的方案,假设 我们需要对文章 articles 这个表(集合) ...

  5. django框架(部分讲解)

    ORM执行SQL语句 有时候ORM的操作效率可能偏低 我们是可以自己编写SQL的 方式1: raw()方法执行原生sql语句 models.User.objects.raw('select * fro ...

  6. 微软出品自动化神器【Playwright+Java】系列(七) 之 元素的可操作性验证

    前言 昨天在某平台发表了一篇这系列的文章,结果不但提示说有违禁词(java也算?),然后文章审核通过后,文章还找不到,不到去哪了,表示很郁闷,去反应未果,确实有点尴尬了. 元素的可操作性验证 关于AP ...

  7. 新项目决定用 JDK 17了

    大家好,我是风筝,公众号「古时的风筝」,专注于 Java技术 及周边生态. 文章会收录在 JavaNewBee 中,更有 Java 后端知识图谱,从小白到大牛要走的路都在里面. 最近在调研 JDK 1 ...

  8. uniapp 微信小程序 实现左侧菜单右侧列表,双向联动的效果

    <template> <view class="u-wrap"> <view class="u-search-box"> & ...

  9. 【转载】EXCEL VBA 通过VBA中的Union合并多个Range选择区域

    在Excel中,Union的功能是合并两个或两个以上的选择区域,合并成为一个更大的区域. 所合并的多个选择区域,这些选择区域,可以是不连续的,也可以是连续的.一般情况下,要使用Union,可通过如下来 ...

  10. 深入理解IOC并自己实现IOC容器

    title: 深入理解IOC并自己实现IOC容器 categories: 后端 tags: - .NET 背景介绍 平时开发的时候我们经常会写出这种代码: var optionA=new A(...) ...