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