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 ...
随机推荐
- 数电第五周周结_by_yc
数电第五周周结_by_yc 基本要点: 组合逻辑电路的行为特点.经典组合逻辑电路的设计.PPA优化 组合逻辑电路设计要点: ①敏感变量列表应包含所有会影响输出的控制量: ②条件语句的完全描述, ...
- C#从实习到搬砖
日常唠唠 没事就聊聊我在c#上踩过的那些坑,和一些笔记 少点比较,多些谦虚 会者不难 原博:轩先生大冒险 2022.4.19 datagridview 修改表头 dataGridView1.Colum ...
- Javascript | 模拟mvc实现点餐程序
MVC模式是一个比较成熟的开发模式.M是指业务模型,V是指用户界面,C则是控制器,使用MVC的目的是将M和V的实现代码分离,从而使同一个程序可以使用不同的表现形式.其中,View的定义比较清晰,就是用 ...
- 更改jenkins的工作目录
1.原始工作空间 2.目的盘符 3.任务管理器,找到Jenkins邮件转到详细信息 4.找到jenkins.exe打开文件所在位置 5.找到jenkins.xml打开 6.修改value值 改前: 改 ...
- 零基础入门 Java 后端开发,有哪些值得看的视频?
目前网络上充满了大量的 Java 视频教程,然而内容却鱼龙混杂,为了防止小伙伴们踩坑,一枫结合自己的学习经验,向大家推荐一些不错的学习资源. 作为一名非科班转码选手,可以说,我是在哔哩哔哩上的研究生! ...
- 微服务11:熔断、降级的Hystrix实现(附源码)
微服务1:微服务及其演进史 微服务2:微服务全景架构 微服务3:微服务拆分策略 微服务4:服务注册与发现 微服务5:服务注册与发现(实践篇) 微服务6:通信之网关 微服务7:通信之RPC 微服务8:通 ...
- selenium 输入文本时报InvalidElementStateException: Message: invalid element state
问题: 当定位输入框时,定位到div标签,如:css->[class="delay el-input"],进行输入操作报invalid element state,显示元素状 ...
- AWVS漏洞扫描器的使用
前言 AWVS是一款强大的web漏洞扫描工具,扫描速度快,可针对特定的漏洞进行扫描测试,用于在按全人员对指定企业进行安全扫描以及测试人员对web应用检测漏洞. AWVS使用以及功能介绍 这里介绍的是使 ...
- 【转载】SQL SERVER 中单字节和双字节互转自定义函数(全角半角转换)
一.首先创建一个自定义函数,代码如下: alter function f_convert( @str nvarchar(4000), --要转换的字符串 @flag bit --转换标志,0转换成半角 ...
- [OpenCV实战]8 深度学习目标检测网络YOLOv3的训练
目录 1 数据集 1.1 下载openImages雪人数据[约1.5小时] 1.2 训练集测试集拆分 2 Darknet 2.1 下载并构建Darknet 2.2 修改代码以定期保存模型文件 2.3 ...