能否用foreach循环实现重复函数递增，使输入框name属性唯一？

嘿，作为jQuery新手遇到这个问题很正常，我来帮你理清楚怎么解决～

问题出在哪？ #

你现在的核心问题是：每次生成一组（2个）音节输入框时，SyllablesID这个全局计数器只在生成完整个区块后才递增一次，导致同一组的两个输入框共用了同一个计数器值；后面点击蓝色按钮新增单个输入框时，也可能因为计数器更新时机不对出现重复。

怎么解决？ #

要让每个输入框的name都有唯一的索引，关键是每创建一个输入框就立刻把计数器加1，而不是等一组都生成完再更新。不管用for循环还是forEach都能实现这个效果，下面给你具体的修改方案：

修改后的完整代码示例 #

首先，先确保全局计数器初始化正确，然后调整生成输入框的逻辑：

$(document).ready(function() {
    var id = 0;
    let SyllablesID = 0; // 全局计数器从0开始
    var addOpdracht = $('<a/>', {
        'class': 'btn btn-success',
        'id': 'addOpdracht'
    }).on('click', function() {
        $('form').append(getExerciseBlock(id));
        $(".exerciseGetWordInput_" + id).focus().select();
        id++;
    }).html('<i class="fa fa-plus fa-2x"></i>');
    
    $('form').append(addOpdracht);
    $('form').append(getExerciseTitle());

    // 生成练习区块的函数，里面用循环创建2个输入框
    function getExerciseBlock(blockId) {
        const $block = $('<div class="exercise-block"></div>');
        
        // 用for循环生成2个默认输入框，每个都拿唯一的计数器值
        for(let i = 0; i < 2; i++){
            $block.append(getWordPartInput(blockId, '', SyllablesID));
            SyllablesID++; // 每生成一个就立刻加1
        }

        // 新增音节的按钮逻辑
        const addSyllableBtn = $('<a class="btn btn-primary">添加音节</a>').on('click', function(){
            $(this).parent().append(getWordPartInput(blockId, '', SyllablesID));
            SyllablesID++; // 新增单个输入框时也及时递增
        });
        $block.append(addSyllableBtn);
        return $block;
    }
});

// 修改输入框生成函数，接收外部传入的索引值
function getWordPartInput(id, cValue, syllableIndex){
    cValue = cValue || '';
    return $('<input/>', {
        'class': 'form-group form-control syllable',
        'type': 'text',
        'value': cValue,
        'placeholder': 'Syllables',
        'id': `SyllablesGetWordPartInput_${syllableIndex}`, // 给id也加唯一标识，避免重复
        'name': `Syllablescounter[${syllableIndex}]`
    });
}

关键改动点说明 #

• 计数器及时更新：不管是生成默认的2个输入框，还是点击蓝色按钮新增单个输入框，每创建一个输入框就立刻把SyllablesID加1，确保每个输入框拿到的都是独一无二的索引。
• 传递索引参数：把原来直接依赖全局变量的getWordPartInput改成接收外部传入的索引值，这样逻辑更清晰，也不容易因为全局变量的意外修改出问题。
• 唯一ID属性：给输入框的id也加上了唯一索引，因为HTML里不允许多个元素有相同的id，这能避免后续做DOM操作时出现奇怪的问题。

用forEach循环的替代写法 #

如果你更喜欢用forEach，可以把生成默认输入框的部分改成这样：

// 用forEach生成2个输入框
Array.from({length:2}).forEach(() => {
    $block.append(getWordPartInput(blockId, '', SyllablesID));
    SyllablesID++;
});

这个写法和for循环效果完全一样，只是语法不同，选你觉得顺手的就行～

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