Layer弹出层动态获取数据的方法


Posted in Javascript onAugust 20, 2018

前一阵子做了一个简单的小项目,用到了Layer弹出层(弹出层的用法就不多加赘述了,官网上都有详细的介绍,这里附上网址http://layer.layui.com/),当时前后台合页面的时候就出现了一个问题,弹出层总是获取不到数据,不过后面还是和同学们一起解决了,希望能帮助到大家。

之前的代码:

<a id="func11" onclick="func11();">点击查看</a>
function func11() {
  console.log($.cookie("id"));
  //iframe窗
  layer.open({
   type: 2,
   title: false,
   shade: [0.5],
   title: '商品简介',
   shadeClose: true,
   shade: 0.5,
   skin:'demo-class',
   maxmin: true, //开启最大化最小化按钮
   area: ['1000px', '660px'],
   shift: 2,
   content: 'product.jsp?id=<%=rs.getInt(“id”)%>', //iframe的url,
  });
}

错误:id号传不过去,页面跳转之后接收的id不正确,所以显示的页面不正确。

错误原因:变量的作用域有问题。在上面的rs不能传到func11()方法里面,所以传递的参数有问题。

解决方法:在func11()函数中添加一个参数,将id这个参数在点击事件里添加进去。

修改后的代码:

<a id="func11" onclick="func11(<%=rs.getInt(“id”)%>);">点击查看</a>
function func11(x) {
  $.cookie("id",x);
  console.log($.cookie("id"))
  //iframe窗
  layer.open({
   type: 2,
   title: false,
   shade: [0.5],
   title: '商品简介',
   shadeClose: true,
   shade: 0.5,
   skin:'demo-class',
   maxmin: true, //开启最大化最小化按钮
   area: ['1000px', '660px'],
   shift: 2,
   content: 'product.jsp?id=' + $.cookie("id"), //iframe的url
  });
 }

以上这篇Layer弹出层动态获取数据的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
图片之间的切换
Jun 26 Javascript
Js参数值中含有单引号或双引号问题的解决方法
Nov 06 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
Apr 25 Javascript
jQuery中$.each使用详解
Jan 29 Javascript
微信小程序实现表单校验功能
Mar 30 Javascript
javascript 作用于作用域链的详解
Sep 27 Javascript
webpack打包并将文件加载到指定的位置方法
Feb 22 Javascript
ExtJs整合Echarts的示例代码
Feb 27 Javascript
Vue中mintui的field实现blur和focus事件的方法
Aug 25 Javascript
vue实现点击选中,其他的不选中方法
Sep 05 Javascript
微信小程序利用swiper+css实现购物车商品删除功能
Mar 06 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
Jun 11 Javascript
layui 给数据表格加序号的方法
Aug 20 #Javascript
解决LayUI表单获取不到data的问题
Aug 20 #Javascript
Layui数据表格之获取表格中所有的数据方法
Aug 20 #Javascript
解决layui上传文件提示上传异常,实际文件已经上传成功的问题
Aug 19 #Javascript
解决layui中table异步数据请求不支持自定义返回数据格式的问题
Aug 19 #Javascript
Vue常用指令详解分析
Aug 19 #Javascript
使用layui 渲染table数据表格的实例代码
Aug 19 #Javascript
You might like
rephactor 优秀的PHP的重构工具
2011/06/09 PHP
js监听表单value的修改同步问题,跨浏览器支持
2009/12/31 Javascript
js 禁止选择功能实现代码(兼容IE/Firefox)
2010/04/23 Javascript
使用apply方法处理数组的三个技巧[译]
2012/09/20 Javascript
js判断当前浏览器类型,判断IE浏览器方法
2014/06/02 Javascript
JavaScript中实现依赖注入的思路分享
2015/01/15 Javascript
JavaScript操作select元素和option的实例代码
2016/01/29 Javascript
Ionic快速安装教程
2016/06/03 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
2016/06/08 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
2017/01/17 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
2017/02/13 Javascript
javascript设计模式之单体模式学习笔记
2017/02/15 Javascript
微信小程序导航栏跟随滑动效果的实现代码
2019/05/14 Javascript
小程序实现左滑删除效果
2019/07/25 Javascript
浅谈Vue.use到底是什么鬼
2020/01/21 Javascript
[03:03]2014DOTA2国际邀请赛 EG战队专访
2014/07/12 DOTA
利用python将json数据转换为csv格式的方法
2018/03/22 Python
Python列表解析配合if else的方法
2018/06/23 Python
python分割一个文本为多个文本的方法
2019/07/22 Python
python列表插入append(), extend(), insert()用法详解
2019/09/14 Python
Python编译成.so文件进行加密后调用的实现
2019/12/23 Python
Python matplotlib实时画图案例
2020/04/23 Python
详解python如何引用包package
2020/06/07 Python
对pytorch中x = x.view(x.size(0), -1) 的理解说明
2021/03/03 Python
国际象棋商店:The Chess Store
2018/07/09 全球购物
早读迟到检讨书
2014/01/24 职场文书
12.4全国法制宣传日活动方案
2014/11/02 职场文书
大学生实训报告总结
2014/11/05 职场文书
2014年助理工程师工作总结
2014/11/14 职场文书
班主任班级管理心得体会
2016/01/07 职场文书
同学联谊会邀请函
2019/06/24 职场文书
不会写演讲稿,快来看看这篇文章!
2019/08/06 职场文书
前端学习——JavaScript原生实现购物车案例
2021/03/31 Javascript
如何用PHP websocket实现网页实时聊天
2021/05/26 PHP
JavaScript中document.activeELement焦点元素介绍
2021/11/27 Javascript
进阶篇之linux环境下安装MySQL数据库
2022/04/09 MySQL