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 ...
随机推荐
- [.NET学习] EFCore学习之旅 -3 一些其他的迁移命令
1.Update-DataBase xxx 概述:将数据库回滚到某个版本. 1.首先创建一个表 Dog 2.生成迁移 Add-Migration CreateDogTable 并更新到数据库 Upd ...
- Selenium4+Python3系列(十二) - 测试框架的设计与开发
前言 自己从未没想过能使用python来做自动化测试框架的设计.开发. 可能有人会好奇说,六哥,你怎么也用python写测试框架了? 领导说: python你也没有实际工作经验,可能就是自己自学的. ...
- 前端知识之JS(javascirpt)
目录 JS简介 JS基础 1.注释语法 2.引入JS的多种方式 3.结束符号 变量与常量 基本数据类型 1.数字类型(Number) 2.字符类型(string) 3.布尔类型(Boolean) 4. ...
- Nmap扫描参数
执行Nmap/nmap --help查看帮助文档,将显示Namp的用法及其功能Nmap的相关参数的含义与用法:扫描目标时用到的参数:-iL:从文件中导入目标主机或目标网段-iR:随意选择目标主机--e ...
- 基于Spark的均值漂移算法在网络舆情聚类中的应用
知网链接 原文链接 张京坤, 王怡怡 软件导刊 2020年19卷第9期 页码:190-195 DOI:10.11907/rjdk.192529 出版日期:2020-9-15 摘 要: 为了改善网 ...
- 使用java代码调用rabbitmq接口进行新增编辑mq用户、虚拟机vhost、动态创建交换机exchange、队列queue以及设置权限,绑定vhost与exchange等操作
使用java代码操作rabbitmq时,首先需要一个有创建用户等权限的管理员账号,需要在rabbitmq的后台管理页面手动创建这个账号,系统推荐的这几个tag可以让账号有rabbitmq后台管理页面的 ...
- Js文件名 排序
参考了别人帖子后,调整之后的排序方法,更加精确.(参考链接在底部) 压缩版 function strCompare(str1,str2){if(str1==undefined&&str ...
- CVE-2022-32532 Apache Shiro 身份认证绕过
漏洞名称 CVE-2022-32532 Apache Shiro 身份认证绕过 利用条件 Apache Shiro < 1.9.1 漏洞原理 使用RegexRequestMatcher进行权限配 ...
- Maui 读取外部文件显示到Blazor中
Maui 读取外部文件显示到Blazor中 首先在maui blazor中无法直接读取外部文件显示 ,但是可以通过base64去显示 但是由于base64太长可能影响界面卡顿 这个时候我们可以使用bl ...
- Java学习笔记:2022年1月9日(其一)
Java学习笔记:2022年1月9日(其一) 摘要:这篇笔记主要记录了Java运行时中的两种变量.以及参数的两种传递方式. 目录 Java学习笔记:2022年1月9日(其一) 1.不同变量的详细探讨 ...