HBuilder webApp开发(六)事件绑定

最新推荐文章于 2024-06-30 00:04:17 发布

小猿猪哥

最新推荐文章于 2024-06-30 00:04:17 发布

阅读量9.9k

点赞数

分类专栏： HBuilder webApp开发文章标签： html5 事件绑定 checkbox hybrid app

本文链接：https://blog.csdn.net/zhuming3834/article/details/51668572

版权

HBuilder webApp开发专栏收录该内容

18 篇文章 223 订阅

订阅专栏

在做公司项目的时候，有一个页面有个个数不定的勾选框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>