問題

有沒有遇到過這樣的需求, 在頁面上會(huì)有不定個(gè)input, 點(diǎn)擊添加按鈕就添加

每次寫這玩意好麻煩啊, 把他封裝起來, 需要的時(shí)候調(diào)用就好了

思路

因?yàn)槊總€(gè)input標(biāo)簽的name如果相同的話, 在后端接收的時(shí)候會(huì)出錯(cuò), 所以我的解決辦法就是在name后加上一個(gè)數(shù)字, 后端用一個(gè)循環(huán)進(jìn)行接收

點(diǎn)擊第一行的添加

點(diǎn)擊的時(shí)候, 將div準(zhǔn)備好, 添加到內(nèi)容div中的第一個(gè)

點(diǎn)擊每行的添加

將div添加到當(dāng)前點(diǎn)擊行后面一個(gè)

點(diǎn)擊每行刪除

刪除當(dāng)前div

實(shí)現(xiàn)

基本思路很簡(jiǎn)單, 只要在每個(gè)點(diǎn)擊按鈕上添加對(duì)應(yīng)的點(diǎn)擊事件, 將結(jié)果封裝成類.

我在封裝的時(shí)候喜歡先想用的時(shí)候怎么用, 然后根據(jù)這個(gè)思路來想應(yīng)該怎么封裝, 思考如下

因?yàn)樘砑拥膁iv肯定是不同的, 是需要傳的參數(shù), 但是如果直接傳div字符串也太丑了, 應(yīng)該在頁面直接寫HTML, 然后傳id即可

添加成功后需要有個(gè)回調(diào)函數(shù), 我得做些收尾的工作

最好有這兩個(gè)參數(shù)就可以直接運(yùn)行

開始碼代碼了:

在創(chuàng)建的時(shí)候接收參數(shù), 大部分參數(shù)都有默認(rèn)值, 也就是說, 按照默認(rèn)值來看, 一個(gè)參數(shù)都不需要

當(dāng)前實(shí)現(xiàn)還很簡(jiǎn)陋, 代碼放在碼云上, 發(fā)現(xiàn)問題再更新, 下載后可以直接運(yùn)行demo文件

https://gitee.com/hujingnb/addDivItem

下面是當(dāng)前的簡(jiǎn)單實(shí)現(xiàn), 要看最新代碼請(qǐng)移步碼云, 歡迎提出問題

/*** 用于添加條目, 不定數(shù)輸入框* @param params* @constructor*/ function AddItem(params) {// 接收參數(shù)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;// 保存當(dāng)前已經(jīng)添加的數(shù)量this.num = 0; }// 向內(nèi)容div的第一個(gè)添加 AddItem.prototype.addFistItem = function () {// 判斷是否超出最大數(shù)量if(this.maxNum != -1 && this.num >= this.maxNum) return;var divItem = this.getDivItem();// 添加this.contentDiv.prepend(divItem);// 調(diào)用回調(diào)函數(shù)if (this.addSuccessFunction) this.addSuccessFunction(divItem, this.secp);// 序號(hào)迭代this.secpIter();// 條目+1this.num++; };// 向元素后面添加 AddItem.prototype.addAfterItem = function(item) {// 判斷是否超出最大數(shù)量if(this.maxNum != -1 && this.num >= this.maxNum) return;var divItem = this.getDivItem();item.after(divItem);// 調(diào)用回調(diào)函數(shù)if (this.addSuccessFunction) this.addSuccessFunction(divItem, this.secp);// 序號(hào)迭代this.secpIter();// 條目+1this.num++; };// 獲取當(dāng)前序號(hào)的div AddItem.prototype.getDivItem = function () {var cloneDiv = this.exampleDiv.clone();var secp = this.secp;// 將div的所有 input 的name加上當(dāng)前序號(hào)cloneDiv.find('input').each(function () {var name = $(this).attr('name');$(this).attr('name', name + '_' + secp);});var _this = this;// 給添加按鈕添加點(diǎn)擊事件cloneDiv.find('[add]').click(function () {_this.addAfterItem(cloneDiv);});// 給刪除按鈕添加點(diǎn)擊事件cloneDiv.find('[remove]').click(function () {cloneDiv.remove();// 條目-1_this.num--;});return cloneDiv; };// 序號(hào)向后延展 AddItem.prototype.secpIter = function () {this.secp += 1; };/*** 運(yùn)行函數(shù)* @param num* 初始狀態(tài)先添加幾個(gè)*/ 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();}} };

總結(jié)

以上是生活随笔為你收集整理的js动态添加div的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。