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>
Jquery 点击弹窗,将弹窗内容赋值到各个项demo的更多相关文章
- jQuery实现页内查找相关内容
当需要在页面中查找某个关键字时,一是可以通过浏览器的查找功能实现,二是可以通过前端脚本准确查找定位,本文介绍通过jQuery实现的页面内容查找定位的功能,并可扩展显示查找后的相关信息. 本文以查找车站 ...
- 引用POPUI来实现弹窗效果,且弹窗中的内容可以点击事件
seajs.use(['../js/ui/dialog'],function(){ $('.center-button').bind('click',function(){ var $dlg = $. ...
- jqeury点击空白关闭弹窗
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery点击复选框触发事件给input赋值
体验效果:http://keleyi.com/keleyi/phtml/jqtexiao/31.htm 代码如下: <!DOCTYPE html> <html xmlns=" ...
- Day14 Javascript 点击添加出弹窗,取消隐藏弹窗小练习 反选,全选,取消边框
点击添加出弹窗,取消隐藏弹窗小练习 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta ...
- 使用js冒泡实现点击空白处关闭弹窗
什么是事件冒泡? 如图:在一个对象上触发某类事件(比如单击onclick事件),这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶 ...
- jQuery 表单元素取值与赋值方法总结
一.普通文本框的赋值与取值 1.1.1赋值 <h2>jQuery 表单元素取值与赋值方法总结</h2> <input type="text" clas ...
- jQuery 点击显示再次点击隐藏
<html> <head> <script type="text/javascript" src="/jquery/jquery.js&qu ...
- Jquery操作表格多出一个内容行
目录 前言 需求 如何监听每一行点击,获取点击id 前后端 问题更新,ajax异步带来的问题 废弃使用HTML拼接 前言 我的前端实在是太差劲了,导致Jquery操作表格多出一个内容行,这个功能我都做 ...
- PHP+Ajax点击加载更多内容 -这个效果好,速度快,只能点击更多加载,不能滚动自动加载
这个效果好,速度快,只能点击更多加载,不能滚动自动加载 一.HTML部分 <div id="more"> <div class="single_item ...
随机推荐
- Python中内置数据库!SQLite使用指南! ⛵
作者:韩信子@ShowMeAI Python3◉技能提升系列:https://www.showmeai.tech/tutorials/56 本文地址:https://www.showmeai.tech ...
- C++编程笔记(GPU并行编程)
目录 一.配置并使用 二.代码 三.内存管理 数组的分配 一.配置并使用 环境:Windows10 + CLion + VS2019 cuda的安装,并行的话只需要安装cuda,cuDNN就不必了 编 ...
- 学习ASP.NET Core Blazor编程系列十五——查询
学习ASP.NET Core Blazor编程系列一--综述 学习ASP.NET Core Blazor编程系列二--第一个Blazor应用程序(上) 学习ASP.NET Core Blazor编程系 ...
- tcp/udp 协议特性和三次握手
一.TCP/UDP协议特性1)TCP特性:工作在传输层.建立连接.可靠的.错误检查 2)UDP特性:工作在传输层.不需要连接.不可靠的.有限的错误检查.传输性能高 2.控制位及确认号解释 控制位:由6 ...
- nuxt.js实现页面刷新功能
key 属性Key:String 或者Function key属性赋值到<router-view>,这对于在动态页面和不同路径中进行转换很有用.不同的key会使页面组件重新渲染. 设置ke ...
- python 学生管理系统 文件版 增删改查
# 在程序开始之前完成数据的读取 # 存在着循环 # 循环的内容 # 将操作内容分解为函数 def sel_student(students_list): """ 查看所 ...
- vivo 低代码平台【后羿】的探索与实践
作者:vivo 互联网前端团队- Wang Ning 本文根据王宁老师在"2022 vivo开发者大会"现场演讲内容整理而成.公众号回复[2022 VDC]获取互联网技术分会场议题 ...
- [深度学习] ncnn编译使用
文章目录 工程 ncnn工程编译使用(cpu) ncnn工程编译使用(vulkan) 参考 工程 ncnn工程编译使用(cpu) 在linux下建立如CMakeLists文件即可编译生成ncnn工程 ...
- Unix 系统数据文件那些事儿
前言 Unix like 系统和 windows 的最大区别就是有一套标准的系统信息数据文件,一般存放在 /etc/ 目录下,并且提供了一组近似的接口访问和查询信息,这些基础设施让系统管理看起来井井有 ...
- vulnhub靶场之FUNBOX: UNDER CONSTRUCTION!
准备: 攻击机:虚拟机kali.本机win10. 靶机:Funbox: Under Construction!,下载地址:https://download.vulnhub.com/funbox/Fun ...