Question

我有一堆表单元素可以通过“添加字段”按钮连续添加。现在我想给这些字段增加名称，如

input-name-xyz-1，input-name-xyz-2，....

input-name-abc-1，input-name-abc-2，.....

foo-1，foo-2，foo-3，....

等等。

“添加字段”按钮调用一个名为addField（）的函数，该函数操纵dom元素以复制节点。

我在为增量名称创建逻辑时遇到问题。你们能帮帮我吗？

这是我正在处理的代码（表单元素是laravel生成的）

/*THE HTML*/
<section class="input">
        {{ Form::label('achievements', 'Achievements:') }}
        <input class="count" name="achievements-count" type="hidden" value="1">
        <p class="addedField input">
            {{ Form::input('input-name-xyz-1', $competition_games, Input::old('achievement-competition'), array('id' => 'achievement-competition')); }}
            {{ Form::select('input-name-abc-1', array('Year - Place'), Input::old('achievement-year'), array('id' => 'achievement-year')) }}
            {{ Form::select('foo-1',    array('Position', 'Gold' => 'Gold', 'Silver' => 'Silver', 'Bronze' => 'Bronze', 'Participant' => 'Participant'), Input::old('achievement-achieved'), array('id' => 'achievement-achieved')) }}
        </p>
        <a onclick="addField(this)">+</a>
    </section>

和javascript

function addField(elem){
    var parent = elem.parentNode;
    var addName = parent.id;
    var count = ++(parent.getElementsByClassName("count")[0].value);
    var lastNode = parent.getElementsByClassName("addedField")[count-2];
    var clone = lastNode.cloneNode(true); 
    var nodes = clone.childNodes;
    for(i=0; i<nodes.length-1; i++){
        nodes[i].value = "";
        nodes[i].name = //I need the logic right here//.
    }
    if(count == 2)
        clone.innerHTML += "<a class='removeLink' onClick='removeField(this)'>X</a>";
    parent.insertBefore(clone,elem);
}

- 问候，Aayush Shrestha

Answer 1

使用此函数可增加字符串末尾的任何数字。

function incNumAtEnd(s) {
  return s.replace(/\d$/, function(match, ofs, str) {
    return (parseInt(match) + 1).toString();
  });
}

这是代码中的用法。

nodes[i].name = incNumAtEnd(nodes[i].name);

增加表单元素javascript的名称

1 个答案: