js dynamically add div

problem

Have not encountered such a demand, there will be uncertainty in the page number input, click the Add button to add

Each write this stuff good trouble ah, put up his package, like when you need to call

Thinking

Because each input label name if the same words, when the rear end received will go wrong, so my solution is to add a number after the name, the back-end with a reception cycle

Click Add the first row

When clicked, the div ready, add to the contents of the div first

Click Add each row

Adding div to a row behind the current click

Click on each row deleted

Remove the current div

achieve

The basic idea is very simple, just add the corresponding click event on every click of a button, the result will be packaged as such.

I like to think, when used in the packaging of how, when, and then according to this line of thought to how the package should think, think about the following

1. Because the added div certainly different, is the need to pass parameters, but if the string is also directly transmitted div ugly, it should write directly in HTML pages, and then you can pass id
2. There is a need to add a callback function after successful, I have to do some finishing work
3. Best to have these two parameters can be run directly

Start code code:

In the creation of reception parameters, most of the parameters have default values, that is to say, according to the default value point of view, you do not need a parameter

The current implementation is still very rudimentary, the code on the code cloud, identify problems and then update, download and run files directly demo

https://gitee.com/hujingnb/addDivItem

Below is the current simple implementation, depending on the venue and date codes code Yun, welcome to ask questions

/**
 * 用于添加条目, 不定数输入框
 * @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();
        }
    }
};