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

本文分享自微信公众号 - 烟草的香味(hujing-bc),作者:胡靖哥哥

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-06-07

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • js解决客户端与服务器时间不一致的问题

    最近在写一个项目时,要根据时间进行不同的展示,直接用new Date().getTime()获取当前时间,结果就出问题了。有些用户擅自修改自己的本地时间,导致获...

    烟草的香味
  • 23种设计模式之享元模式

    上面定义中要求细粒度对象, 那么不可避免的使得对象数量多且性质相近, 我们将这些对象的信息分为两个部分: 内部状态和外部状态

    烟草的香味
  • Java 注解

    注解时在Java5中开始引入的概念。可以将注解想象成标签,给指定的方法、类、变量、参数、包等贴上一个标签。

    烟草的香味
  • Flutter基础widgets教程-Tooltip篇

    青年码农
  • 【Flutter 专题】61 图解基本 Button 按钮小结 (一)

    Button 在日常中是必不可少的,和尚尝试过不同类型的 Button,也根据需求自定义过,今天和尚系统的学习一下最基本的 Button;

    阿策
  • element表单校验问题

    新增时,校验为空未通过,点击取消按钮。重新打开编辑,明明有值,显示校验未通过。

    崔笑颜
  • Flutter基础widgets教程-ListTile篇

    青年码农
  • 从零开始学 Web 之 JavaScript 高级(一)原型,贪吃蛇案例

    由来:构造函数的问题。如果一个构造函数中有一个匿名方法,那么每实例化一个对象,然后在对象调用这个方法的时候,由于每个对象的方法都是各自的,所以每次调用这个方法的...

    Daotin
  • js实现单张或多张图片持续无缝滚动

    想要实现图片持续滚动,既然使用js,就千万不要加css动画、过渡等相关样式,如果想要滚动的平滑一下,可以一像素一像素的感动,则很平滑,如果加了过渡动画,当图片重...

    蓓蕾心晴

扫码关注云+社区

领取腾讯云代金券