如何复用动态输入字段代码实现多组动态输入功能

修改后的HTML结构 #

把原有的ID替换为类，给每组动态字段添加独立容器，并通过data-max-fields自定义每组的最大可添加数量：

<!-- 第一组：作者字段 -->
<section class="section dynamic-field-group" data-max-fields="5">
    <par-div class="par-label">
        <label for="auth">Author<span>*</span><i class="bi bi-question-circle infor"></i>
            <par-sep class="ctooltip">Enter Author's Name</par-sep>
        </label>
    </par-div>
    <par-div class="par-input-sm field-container">
        <par-sep class="par-input-sm dynamic-field">
            <input class="input-sm in-color" placeholder="Author" type="text" name="authors[]">
        </par-sep>
        <button type="button" class="addmorebtn add-button">Add More</button>
        <button type="button" class="removebtn remove-button" disabled="disabled">Remove Last</button>
    </par-div>
</section>

<!-- 第二组：出版商字段（可直接复用结构） -->
<section class="section dynamic-field-group" data-max-fields="3">
    <par-div class="par-label">
        <label for="publisher">Publisher<span>*</span><i class="bi bi-question-circle infor"></i>
            <par-sep class="ctooltip">Enter Publisher's Name</par-sep>
        </label>
    </par-div>
    <par-div class="par-input-sm field-container">
        <par-sep class="par-input-sm dynamic-field">
            <input class="input-sm in-color" placeholder="Publisher" type="text" name="publishers[]">
        </par-sep>
        <button type="button" class="addmorebtn add-button">Add More</button>
        <button type="button" class="removebtn remove-button" disabled="disabled">Remove Last</button>
    </par-div>
</section>

修改后的jQuery代码 #

重构为基于组的独立逻辑，支持多组复用，且每组可自定义最大字段数：

// 事件委托绑定添加按钮点击事件
$(document).on('click', '.add-button', function() {
    const $group = $(this).closest('.dynamic-field-group');
    const $container = $group.find('.field-container');
    const maxFields = parseInt($group.data('max-fields'));
    const fieldCount = $container.find('.dynamic-field').length;

    if (fieldCount >= maxFields) return;

    // 克隆组内的第一个动态字段作为模板
    const $newField = $container.find('.dynamic-field:first').clone();
    // 清空输入框内容并更新ID
    $newField.find('input').val('').attr('id', `field-${fieldCount + 1}`);
    // 添加间距样式
    $newField.css({ 'margin': '5px 0' });
    // 插入到最后一个字段后面
    $container.find('.dynamic-field:last').after($newField);

    // 更新按钮状态
    updateButtonStates($group);
});

// 事件委托绑定移除按钮点击事件
$(document).on('click', '.remove-button', function() {
    const $group = $(this).closest('.dynamic-field-group');
    const $container = $group.find('.field-container');
    const fieldCount = $container.find('.dynamic-field').length;

    if (fieldCount <= 1) return;

    // 移除最后一个字段
    $container.find('.dynamic-field:last').remove();

    // 更新按钮状态
    updateButtonStates($group);
});

// 统一更新组内按钮状态的函数
function updateButtonStates($group) {
    const $container = $group.find('.field-container');
    const maxFields = parseInt($group.data('max-fields'));
    const fieldCount = $container.find('.dynamic-field').length;
    const $addBtn = $group.find('.add-button');
    const $removeBtn = $group.find('.remove-button');

    // 控制添加按钮是否禁用
    if (fieldCount >= maxFields) {
        $addBtn.attr('disabled', 'disabled');
    } else {
        $addBtn.removeAttr('disabled');
    }

    // 控制移除按钮是否禁用
    if (fieldCount <= 1) {
        $removeBtn.attr('disabled', 'disabled');
    } else {
        $removeBtn.removeAttr('disabled');
    }
}

关键改动说明 #

• 类替代ID：移除全局ID（如#add-button），改用类选择器，避免多组冲突
• 组独立上下文：通过closest('.dynamic-field-group')锁定当前操作的字段组，确保每组逻辑互不干扰
• 自定义最大数量：用data-max-fields属性给每组设置不同的最大可添加数，灵活配置
• 事件委托：使用$(document).on()绑定事件，确保动态添加的按钮也能触发逻辑
• 统一状态管理：提取updateButtonStates函数，集中处理按钮禁用/启用逻辑，减少冗余代码

内容的提问来源于stack exchange，提问作者Dream