问题
有没有遇到过这样的需求, 在页面上会有不定个input, 点击添加按钮就添加
每次写这玩意好麻烦啊, 把他封装起来, 需要的时候调用就好了
思路
因为每个input标签的name如果相同的话, 在后端接收的时候会出错, 所以我的解决办法就是在name后加上一个数字, 后端用一个循环进行接收
点击第一行的添加
点击的时候, 将div准备好, 添加到内容div中的第一个
点击每行的添加
将div添加到当前点击行后面一个
点击每行删除
删除当前div
实现
基本思路很简单, 只要在每个点击按钮上添加对应的点击事件, 将结果封装成类.
我在封装的时候喜欢先想用的时候怎么用, 然后根据这个思路来想应该怎么封装, 思考如下
- 因为添加的div肯定是不同的, 是需要传的参数, 但是如果直接传div字符串也太丑了, 应该在页面直接写HTML, 然后传id即可
- 添加成功后需要有个回调函数, 我得做些收尾的工作
- 最好有这两个参数就可以直接运行
开始码代码了:
在创建的时候接收参数, 大部分参数都有默认值, 也就是说, 按照默认值来看, 一个参数都不需要
当前实现还很简陋, 代码放在码云上, 发现问题再更新, 下载后可以直接运行demo文件
https://gitee.com/hujingnb/addDivItem
下面是当前的简单实现, 要看最新代码请移步码云, 欢迎提出问题
/*** 用于添加条目, 不定数输入框* @param params* @constructor*/
function AddItem(params) {// 接收参数var contentDivId = params['content_div_id'] || 'content_div_id';var exampleDivId = params['example_div_id'] || 'example_div_id';var addButtonId = params['add_button_id'] || 'add_button_id';this.addButton = $('#' + addButtonId);this.contentDiv = $('#' + contentDivId);this.exampleDiv = $('#' + exampleDivId);this.addSuccessFunction = params['add_success'];this.secp = params['start_num'] || 0;this.maxNum = params['max_num'] || -1;// 保存当前已经添加的数量this.num = 0;
}// 向内容div的第一个添加
AddItem.prototype.addFistItem = function () {// 判断是否超出最大数量if(this.maxNum != -1 && this.num >= this.maxNum) return;var divItem = this.getDivItem();// 添加this.contentDiv.prepend(divItem);// 调用回调函数if (this.addSuccessFunction) this.addSuccessFunction(divItem, this.secp);// 序号迭代this.secpIter();// 条目+1this.num++;
};// 向元素后面添加
AddItem.prototype.addAfterItem = function(item) {// 判断是否超出最大数量if(this.maxNum != -1 && this.num >= this.maxNum) return;var divItem = this.getDivItem();item.after(divItem);// 调用回调函数if (this.addSuccessFunction) this.addSuccessFunction(divItem, this.secp);// 序号迭代this.secpIter();// 条目+1this.num++;
};// 获取当前序号的div
AddItem.prototype.getDivItem = function () {var cloneDiv = this.exampleDiv.clone();var secp = this.secp;// 将div的所有 input 的name加上当前序号cloneDiv.find('input').each(function () {var name = $(this).attr('name');$(this).attr('name', name + '_' + secp);});var _this = this;// 给添加按钮添加点击事件cloneDiv.find('[add]').click(function () {_this.addAfterItem(cloneDiv);});// 给删除按钮添加点击事件cloneDiv.find('[remove]').click(function () {cloneDiv.remove();// 条目-1_this.num--;});return cloneDiv;
};// 序号向后延展
AddItem.prototype.secpIter = function () {this.secp += 1;
};/*** 运行函数* @param num* 初始状态先添加几个*/
AddItem.prototype.run = function (num) {var _this = this;this.addButton.click(function () {_this.addFistItem();});// 删除示例divthis.exampleDiv.remove();// 删除div的idthis.exampleDiv.removeAttr('id');if(num){for(let i = 0; i < num; i++){this.addFistItem();}}
};
