HBuilder webApp开发(六)事件绑定
来源:互联网 发布:中国远征军 知乎 编辑:程序博客网 时间:2024/05/16 11:46
在做公司项目的时候,有一个页面有个个数不定的勾选框checkbox视图区,每个勾选框对应一个ID和NAME的值,我们需要把选中的chexkbox的ID获取到,然后以拼接成字符串,字符中间用“,”分割。在这个需求里面有三个点,1:不定选项的checkbox; 2:获取选中的checkbox的ID; 3:字符串中间使用“,”拼接。
关于上面的三个知识点来说,个人任我最难的是第2个,难点在在使用H5做的时候我还不知道js的时间绑定中的这种方法,我们虽说是要获取选中的checkbox的ID,实际这些需要在checkbox的点击时间里面去处理。以前做原生的时候是在button的点击事件里面处理的,每个button的tag值我们可以设置为0~n,然后根据tag值从数据源数组里面去取数据。但是在H5里面去不能这样处理,使用下面的事件绑定方法:
document.getElementById('imageView').addEventListener('tap',function(){})
这个事件绑定的方式有个特点就是需要知道每个checkbox的id,然后一个id有一个事件绑定方法。显然这么做是难以接受的,因为checkbox的个数不定。
还有一点就是,保存选中checkbox的ID,再加上每个checkbox都存在多次点击的时候,这个时候就需要在存储ID的容器里面处理选中的时候存储的是ID,非选中的时候存储的不是ID。想到每个ID的唯一性和字典里面key的唯一性,下面的就好做了。每一个checkbox对应字典里面的一个键值对,key是ID,选中时的value是ID,非选中的时候value不是ID(这里我们假定为是“X”);然后在checkbox点击事件里面,当checkbox被选中时,设置其对应的键值对的value为对应的ID,否则设置为“X”。
这里还是没有说到这篇博客的重点,事件绑定。其实这也是这么一个功能点,我认为对我来说我需要学习的一个知识点,所以我叫他事件绑定。
效果图
这里初始设置的每个按钮是未选中状态。
js事件绑定
《JavaScript事件绑定》
《Javascript事件绑定的几种方式》
关于Javascript的事件绑定,可以看看上面两篇文章。但在实际使用中我们需要多看看mui提供的方式,因为平台和环境不一样。
代码
<html> <head> <meta charset="utf-8"> <title>Hello MUI</title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <!--标准mui.css--> <link rel="stylesheet" href="../css/mui.min.css"> <link rel="stylesheet" href="../css/mui.css" /> <!--App自定义的css--> <style type="text/css"> .mui-checkbox{ height: 44px; background: white; border-bottom-style: solid; border-bottom-color: #F3F3F3; border-bottom-width: 1px; } .span { float: right; margin-right: 150px; height: 44px; line-height: 44px; } .checkbox { margin-top: 5px; margin-right: 200px; height: 44px; line-height: 44px; } .checkbox :before { 0px; } </style> </head> <body> <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title">事件绑定</h1> </header> <div class="mui-content"> <div class="mui-checkbox"> <span class="span">我的id:1</span> <input type="checkbox" class="checkbox" id="" value="" /> </div> <div class="mui-checkbox"> <span class="span">我的id:2</span> <input type="checkbox" class="checkbox" id="" value="" /> </div> <div class="mui-checkbox"> <span class="span">我的id:3</span> <input type="checkbox" class="checkbox" id="" value="" /> </div> </div> </body> <script src="../js/mui.min.js"></script> <script src="../js/mui.zoom.js"> </script> <script src="../js/mui.previewimage.js"></script> <script src="../js/tools.js" ></script> <script> var checkDice = new Array(); mui.init({ swipeBack:true //启用右滑关闭功能 }); mui.plusReady(function() { getData(); }) // 数据处理 function getData() { var content = document.body.querySelector('.mui-content'); content.innerHTML = ''; var count = Math.random()*10 | 0; // 获取0~10之间的整数 count = count + 5; // 6~16之间 console.log(count); for (var index = 0; index < count; index ++ ) { var div = document.createElement('mui-checkbox'); div.innerHTML = '<div class="mui-checkbox">' + '<span class="span">我的ID:' + index + '</span>' + '<input type="checkbox" class="checkbox" id="' + index +'" value="" /></div>'; content.appendChild(div,content.firstChild); checkDice[String(index)] = 'X'; } } // 事件绑定 mui('.mui-content').on('change','input',function(){ console.log("id = " + this.id + " status = " + this.checked); if (this.checked) { checkDice[this.id] = this.id; } else{ checkDice[this.id] = 'X'; } console.log("checkDice = " + checkDice); console.log('被选中的checkbox的ID是:',makeData(checkDice)); }) // 数据处理 function makeData(dice){ var result = ''; for (var key in dice) { if (dice[key] != 'X') { result = result + dice[key] + ','; } } // 去除字符串最后的','后返回 return result.substring(0,result.length - 1); } </script></html>
总结
写代码前,理清思路,学会多看文档,多思考。
代码下载地址:请点击我!
- HBuilder webApp开发(六)事件绑定
- HBuilder webApp开发(一)新建项目
- HBuilder webApp开发(三)轮播图swiper
- HBuilder webApp开发(十一)二维码生成
- HBuilder webApp开发(十三)二维码扫描
- HBuilder webApp开发(十六)定位geolocation
- HBuilder webApp开发(十四)iOS平台5+插件开发
- HBuilder webApp开发 Websql增删改查操作
- HBuilder webApp开发(四)相册/拍照-图片上传
- HBuilder webApp开发(五)图片墙/图片预览
- HBuilder webApp开发(八)微信/QQ/新浪登录
- HBuilder webApp开发(九)首次启动轮播页的制作
- HBuilder webApp开发(十)在线差异化升级
- HBuilder webApp开发(十二)微信/支付宝支付
- HBuilder webApp开发(十五)MUI增加自定义icon图标
- HBuilder webApp开发(十七)百度地图URI API的使用
- 利用HBuilder打包前端开发webapp为apk
- HBuilder webApp开发(二)表格上拉加载更多下拉刷新
- CentOS x64上Matlab R2015b的镜像安装方法与卸载
- Android组件(Broadcast Receiver)
- QtQuick学习笔记之QML自定义信号
- Chrome浏览器快捷键大全
- C++中的运算符重载
- HBuilder webApp开发(六)事件绑定
- cordova的camera插件,IOS下图片旋转问题
- eclipse svn operation in process 无法同步 更新 提交
- [ solr入门 ] - 利用solrJ进行检索
- Linux查看端口命令:netstat -tln
- IOS Dev Intro - Message Category and Protocol
- NPOI 将DataGridView导出到Excel
- ListView多条目展示
- cordova + ionic 使用中碰到的一些问题