js动态添加div

问题

有没有遇到过这样的需求, 在页面上会有不定个input, 点击添加按钮就添加

每次写这玩意好麻烦啊, 把他封装起来, 需要的时候调用就好了

思路

因为每个input标签的name如果相同的话, 在后端接收的时候会出错, 所以我的解决办法就是在name后加上一个数字, 后端用一个循环进行接收

点击第一行的添加#

点击的时候, 将div准备好, 添加到内容div中的第一个

点击每行的添加#

将div添加到当前点击行后面一个

点击每行删除#

删除当前div

实现

基本思路很简单, 只要在每个点击按钮上添加对应的点击事件, 将结果封装成类.

我在封装的时候喜欢先想用的时候怎么用, 然后根据这个思路来想应该怎么封装, 思考如下

1. 因为添加的div肯定是不同的, 是需要传的参数, 但是如果直接传div字符串也太丑了, 应该在页面直接写HTML, 然后传id即可
2. 添加成功后需要有个回调函数, 我得做些收尾的工作
3. 最好有这两个参数就可以直接运行

开始码代码了:

在创建的时候接收参数, 大部分参数都有默认值, 也就是说, 按照默认值来看, 一个参数都不需要

当前实现还很简陋, 代码放在码云上, 发现问题再更新, 下载后可以直接运行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();
    // 条目+1
    this.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();
    // 条目+1
    this.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();
    });
    // 删除示例div
    this.exampleDiv.remove();
    // 删除div的id
    this.exampleDiv.removeAttr('id');
    if(num){
        for(let i = 0; i < num; i++){
            this.addFistItem();
        }
    }
};