公司的项目经常需要使用单选按钮选择类型，下面看图：
如果每需要一次这样的单选按钮就要重新写一次css,html,js。下面放代码
css代码：
.selected:before{ content: "\EA06"; background-color:#FFFFFF; color: #e98758; }html代码：
<div class="weui-cell__bd client-type"> <span class="person" > <a href="javascript:;" class="weui-icon-circle selected " data-type="1"></a> <span class="user-type">个体商户</span> </span> <span class="company"> <a href="javascript:;" class="weui-icon-circle" data-type="2"></a> <span class="user-type">机构</span> </span> </div>
js代码：
$(".client-type").find(".selected").removeClass("selected"); $(".person .weui-icon-circle").addClass("selected");写一两次还好，如果多个页面需要多个这样的单选按钮，那代码量较大，而且需要复制粘贴大量的代码。
我的想法就是把它整合成一个组件，写尽可能少的代码，不依赖环境的组件。下面看我整合的代码：
;(function(){ var module = { //数据层，$label标签名的数组，$container包含元素 $label : null, $container:null, //表示层 getHtml : function() { var html =''; for(var i=0,len=this.label.length;i<len;i++){ html += '<span class="parent">'; if(i==0){ html += '<a href="javascript:;" class="weui-icon-circle selected" data-type=""></a>' }else{ html += '<a href="javascript:;" class="weui-icon-circle " data-type=""></a>' } html += '<span class="user-type">'+this.label[i]+'</span>'+ '</span>'; } return html; }, //行为层,$el为被点击的元素，container为包含元素 eventBind: function(){ var _this = this,$el = $(".parent"); $el .on('click',function(e){ console.log($(this)); _this.$container.find(".weui-icon-circle").removeClass("selected"); $(e.target).parents(".parent").find(".weui-icon-circle").addClass("selected"); }) }, //初始化数据 init: function(label,container){ this.label = label ; this.$container = container ; var html = this.getHtml(); this.$container.html(html); this.eventBind(); } } window.module = module; })(); //调用 ;(function(){ $(document).ready(function(){ init(); function init(){ var label = ["个人","机构","学校","公司"]; var container = $(".weui-cell__bd"); module.init(label, container); } }) })(); 运行效果:
如果类型只有两个，只需要修改传进去的数组
//调用 ;(function(){ $(document).ready(function(){ init(); function init(){ var label = ["个人","机构"]; var container = $(".weui-cell__bd"); module.init(label, container); } })
需要传入包含按钮的选择器，最好使用id选择器。
组件主要采用了MVC模式，但是组件还存在一些问题，例如：
1、如果每个单选按钮需要带自定义的data-id属性，这就需要传入值进去
2、html需要插入到页面中，如果一个页面需要插入较多这样的按钮，DOM插入操作增加，浏览器性能降低
