javascript - 如何更改 jQuery 中的输入名称

Question

这就是我目前正在努力实现的目标:

我正在尝试克隆表单并更改输入名称。我该如何完成这个任务。

JS:

$(document).ready(function() {
var counter = 0;
var MAX_FIELDS = 3;
var MIN_FIELDS = 1;
var form = $('.force-group');

$('#add').on('click', function(e) {
    if (counter < MAX_FIELDS) {
        //$(".form-group").clone().appendTo("#forceForm");
        $.each(form, function(i) {
            var clone = $('.force-group').first().clone();
            clone.children().val("");

            $(this).parent().append(clone);
            if (counter == 0) {
                $("b:eq(1)").html("<b> Force 2</b>");
            };
            if (counter == 1) {
                $("b:eq(3)").html("<b> Force 3</b>");
            };
            if (counter == 2) {
                $("b:eq(5)").html("<b> Force 4</b>");
            };

        });
        counter++;
    };
});

html:

  <#import "template.ftl" as layout />
  <@layout.template title="Force" js="/js/force.js" css="/css/force.css">

<h3 class = "text-center">Total Force</h3>
<hr>

<div class="col-md-6 col-md-offset-3 col-xs-8 col-xs-offset-2">
    <div class="force-selector input_fields_wrap">
        <a id = 'add' href="#" class="btn btn-primary col-md-5">Add Force</a>
        <a id = 'remove' href="#" class="btn btn-warning col-md-5 col-md-offset-2">Remove Force</a>
    </div>
</div>
<div class="col-md-6 col-md-offset-">
    <div class="col-xs-12">
        <div class = "well" id="force-input">
            <form id = "forceForm" class = "form-horizontal" method = "POST" autocomplete="off">
                <fieldset>
                    <h4 class="text-center" id="form-title"><strong>Input</strong></h4>
                    <div class="form-group force-group">
                        <label class = "control-label col-md-2"><b>Force 1</b></label>
                        <label class = "control-label col-md-2">Magnitude</label>
                        <div class = "col-md-3 force-info">
                            <input type = "text" class="form-control" name="0force" autocomplete="off">
                        </div>
                        <label class = "control-label col-md-2">Angle</label>
                        <div class = "col-md-3 force-info">
                            <input type = "text" class="form-control" name="0angle" autocomplete="off">
                        </div>
                    </div>
                </fieldset>
            </form>
        </div>
    </div>
</div>
<div class = "col-md-5">
    <table id = "forceChart" class="table table-striped table-hover">
        <thead>
        <tr class="table">
            <th class="head-pad">Total Force</th>
        </tr>
        </thead>
        <tbody>
        <tr class="table">
            <td class="pad">Net Force:</td>
        </tr>
        </tbody>
        </thead>
        <tbody>
        <tr class="table">
            <td class="pad">Direction:</td>
        </tr>
        </tbody>
        <tfoot></tfoot>
    </table>
</div>
<div class = "col-md-4 col-md-offset-4 col-xs-6 col-xs-offset-3">
    <div class="form-group">
        <div class = "col-md-6 col-xs-offset-3">
            <input id = "calculate" class = "btn btn-success btn-block" type="submit" value="Calculate!">
        </div>
    </div>
</div>

这是 jsfiddle 链接:

Click here for the link .

PS:我正在使用模板器，因此 jsfiddle 看起来有点糟糕。

我是 jQuery 新手，我一直在寻找解决方案，但我似乎陷入困境。

我尝试使用 .last() 和 attr 编辑，但这似乎没有做任何事情。

Answer 1

要更改输入名称，只需使用 attr() 方法

$('input').attr('name', 'yourNewname');

我提醒您输入的内容没有 Id，因此您应该使用以下方法之一:

1/为每个输入指定一个 ID，例如 #input1 #input2

$('#input1').attr('name', 'yourNewname1'); // change the name of first input

$('#input2').attr('name', 'yourNewname2'); // change the name of first input

或

你可以使用eq()

$('input').eq(0).attr('name', 'yourNewname1'); // change the name of first input

$('input').eq(1).attr('name', 'yourNewname2'); // change the name of first input