Question

所以红色正方形http://imgur.com/lQYaTDB正在显示我想要实现的目标我希望在每个冠军之后重置数字从[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();
    });

});

Answer 1

也许最简单的解决方案是在每次用户交互后更新索引。这不是效率最高的代码（jQuery.each比使用for循环慢），但它有效（demo）：

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 + ']' );
            });      
    });

};

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

重置动态附加输入的data-Id

1 个答案: