如何设计一个能动态添加时段的组件？

本文共计666个文字，预计阅读时间需要3分钟。

javascript/** * 优惠劵有效期管理 * 功能：优惠劵新增加、修改、详细页面：时间组件类 * @author 石冰冰冰 * @date 2017/7/23 */var couponPeriod={ valid: { yes: true, msg: '输入时间段不合法，请' }};

couponPeriod.js

/** * 优惠券新增、修改、详细页面：时段组件类 * @author 石冬冬 * @date 2017/7/23 */ var couponPeriod = { /** * 验证 */ valid: { yes: true,//表示时段输入是否合法 msg: '输入时段不合法，请检查是否跨时段区间！' }, /** * 常量 */ Cts: { index: 0, times: [], target: '#applyPeriodLayout' }, /** * 初始化 */ init: function (options) { $.extend(this.Cts, options); var act = coupon.Cts.act; var hasList = $('#applyPeriodLayout').attr('has-list'); var condition = (act == 'add' || (act == 'edit' && Number(hasList || 0)) == 0); if (act == 'edit') { this.Cts.index = Number($("#applyPeriodLayout").attr("data-size")) - 1; } if (condition) { this.funcs.addRow(this.Cts.target, this.Cts.index); } this.funcs.initTimes(); this.initEvts(); }, /** * 事件监听 */ initEvts: function () { var _this = this; var $target = this.Cts.target; /** * 添加事件监听 */ $('input[handle=addRow]').bind('click', function (e) { e.preventDefault(); _this.Cts.index++; _this.funcs.addRow($target, _this.Cts.index); }); }, /** * 函数成员 */ funcs: { /** * 初始化 times数组 */ initTimes: function () { $('#applyPeriodLayout div').each(function (i) { var index = $(this).attr('index'); var startTime = $(this).children('input[id=periodStart' + index + ']').val(); var endTime = $(this).children('input[id=periodEnd' + index + ']').val(); if (startTime && endTime) { couponPeriod.Cts.times.push([startTime, endTime]); } }); console.info("时段times=%s", couponPeriod.Cts.times.toString()); }, /** * 内部成员函数 */ member: { /** * 起止 * @param index */ startSelection: function (index) { return ''; }, /** * 截至 * @param index */ endSelection: function (index) { return ''; } }, /** * 添加 * @param index 索引 */ addRow: function (target, index) { var btn = (index == 0) ? '' : '