Jquery 重置动态附加输入的数据Id

因此，红色方块显示了我试图实现的目标，我想在每个冠军之后重置数字，从[1]开始，但有人可能希望在第一个冠军后添加更多字段，这将增加旧数字

$(document).ready(function(){
    championNumber = 1;
    spellNumber=1;
    $('a#AddChampion').on('click',function(){

        $('div#ChampionInput').append(
        '<div class="Champion" data-id="'+championNumber+'">\
             <a href="#" class="Remove">Remove</a>\
             <br>\
             <input type="text" class="ChampionInput" list="champions" name="champion[]" placeholder="Champion '+championNumber+'">\
             <datalist id="champions"></datalist>\
             <a href="#" class="AddSpell">Add Spell</a>\
             <br>\
         <div>');
        for(var key in champions){
            if(champions.hasOwnProperty(key)){
                $('#champions').append('<option value="' + key + '">');
            }
        }
        championNumber++;
    });
    $('div#ChampionInput').on('click', 'a.Remove',function(){
        $(this).parent('div.Champion').remove();

    });
    $('div#ChampionInput').on('click', 'a.AddSpell',function(){

        $(
        '<div class="Spell" data-id="'+spellNumber+'">\
            <select name="change['+$(this).parent('div').data('id')+'][]">\
               <option value="Passive">Passive</option>\
               <option value="Q" selected>Q</option>\
               <option value="W">W</option>\
               <option value="E">E</option>\
               <option value="R">R</option>\
            </select>\
            <input type="text" name="championSpell['+$(this).parent('div').data('id')+'][]">\
            <br>\
            <textarea type="text" size="20" name="SpellDescription['+$(this).parent('div').data('id')+'][]" placeholder="Enter Description" />\
            <select name="SpellChange['+$(this).parent('.Champion').data('id')+']['+spellNumber+'][]">\
               <option value="buff">Buff</option>\
               <option value="nerf">Nerf</option>\
               <option value="new">New</option>\
               <option value="change">Change</option>\
               <option value="bugfix">Bugfix</option>\
            </select>\
            <a href="#" class="AddChange">Add Change </a>\
            <a href="#" class="RemoveSpell">Remove Spell</a>\
        </div>\
        ').appendTo('.Champion[data-id='+$(this).parent('div').data('id')+']');
        spellNumber++;
    });
    $('div#ChampionInput').on('click', 'a.AddChange',function(){
        $(this).next('a.RemoveSpell').after(
           '<div class="Change">\
                <textarea type="text" size="20" name="SpellDescription['+$(this).parent('div').data('id')+'][]" placeholder="Enter Description" />\
                <select name="SpellChange['+$(this).parent().parent('div').data('id')+']['+$(this).parent('.Spell').data('id')+'][]">\
                   <option value="buff">Buff</option>\
                   <option value="nerf">Nerf</option>\
                   <option value="new">New</option>\
                   <option value="change">Change</option>\
                   <option value="bugfix">Bugfix</option>\
                </select>\
                <a href="#" class="RemoveChange">Remove Change</a>\
            </div>');
    });
    $('div#ChampionInput').on('click', 'a.RemoveSpell',function(){
        $(this).closest('.Spell').remove();
    });
    $('div#ChampionInput').on('click', 'a.RemoveChange',function(){
        $(this).closest('.Change').remove();
    });

});

$（文档）.ready（函数（）{
championNumber=1；
拼写数=1；
$（'a#AddChampion'）。在（'click'，function（）上{
$（'div#championput'）。追加(
'\
\

\
\
\
\

\
');
for（var密钥在冠军中）{
if（champions.hasOwnProperty（键））{
$（“#冠军”）。追加（“”）；
}
}
championNumber++；
});
$（'div#championput'）。在（'click'，'a.Remove'，function（）上{
$（this.parent（'div.Champion'）.remove（）；
});
$（'div#championput'）。在（'click'，'a.AddSpell'，function（）上{
$(
'\
\
被动的\
Q\
W\
E\
R\
\
\

\
\
\
浅黄色\
削弱\
新的\
改变\
错误修正\
\
\
\
\
.appendTo（'.Champion[data id='+$（this.parent（'div'）.data（'id'）+']）；
拼写数字++；
});
$（'div#championput'）。在（'click'，'a.AddChange'，function（）上{
$（this.next（'a.RemoveSpell'）。之后(
'\
\
\
浅黄色\
削弱\
新的\
改变\
错误修正\
\
\
');
});
$（'div#championput'）。在（'click'，'a.RemoveSpell'，function（）上{
$（this）.closest（'.Spell'）.remove（）；
});
$（'div#championput'）。在（'click'，'a.RemoveChange'，function（）上{
$（this）.closest（'.Change'）.remove（）；
});
});

也许最简单的解决方案是在每次用户交互后更新索引。这不是最有效的代码（

jQuery.each

都比

for

循环慢），但它可以工作（）：

---

在表单中添加或删除项目后调用上述函数。

最简单的解决方案可能是在每次用户交互后更新索引。这不是最有效的代码（

jQuery.each

都比

for

循环慢），但它可以工作（）：

---

在表单中添加或删除项后调用上述函数。

为什么不使用javascript为每个字符构建对象，而不是为每个条目添加id？如果您提供了此代码的JSFIDLE演示，以使其更易于操作和修改，这将有所帮助。如果这有助于我在一分钟内构建JSFIDLE，我不完全理解为每个字符构建对象的含义。那么您的php脚本是否需要特定的id命名约定？是的，在发送此表单后，我如果可以很容易地以正确的顺序获取它，而不是向每个条目添加id，为什么不使用javascript为每个字符构建一个对象呢？如果您提供了此代码的JSFIDLE演示，以使其更易于操作和修改，这将有所帮助。如果这有助于我在一分钟内构建JSFIDLE，我不完全理解为每个字符构建对象的含义。那么您的php脚本是否需要特定的id命名约定？是的，在发送此表单后，我将很容易以正确的顺序获得。哦，我刚刚意识到我没有包括对法术迷的重新索引，但我希望你能从上面的代码中得到这个想法。哦，我刚刚意识到我没有包括对法术迷的重新索引，但我希望你能从上面的代码中得到这个想法。

renumber = function(){
    $('.Champion').each(function( i ){
        var championIndex = i + 1;
        $(this)
            .attr( 'data-id', championIndex )
            .find( 'input' )
            .attr( 'placeholder', 'Champion ' + championIndex )
            .end()
            .find( '.Spell' )
            .each(function( j ){
                var spellIndex = j + 1;
                $(this)
                    .attr( 'data-id', spellIndex )
                    .find( 'select:first' )
                    .attr( 'name', 'change[' + championIndex + '][' + spellIndex + ']' )
                    .next() // input
                    .attr( 'name', 'championSpell[' + championIndex + '][' + spellIndex + ']' )
                    .next() // textarea
                    .attr( 'name', 'SpellDescription[' + championIndex + '][' + spellIndex + ']' )
                    .next() // 2nd select
                    .attr( 'name', 'SpellChange[' + championIndex + '][' + spellIndex + ']' );
            });      
    });

};