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();
        }
    }
};