Question

您好我正在帮助以下示例进行克隆

示例HTML代码

  <form method="post" action="#" class="inlineForm" enctype="multipart/form-data">
    <div class="repeatingSection">
        <a href="#" class="buttonGray buttonRight deleteFight">Delete</a>
        <input type="hidden" name="fighter_a_id_1" id="fighter_a_id_1" value="" />
        <input type="hidden" name="fighter_b_id_1" id="fighter_b_id_1" value="" />
        <input type="hidden" name="winner_id_1" id="winner_id_1" value="" />
        <div class="formRow">
            <label for="fighter_a_1">Fighters</label>
            <input type="text" name="fighter_a_1" id="fighter_a_1" value="" /> <span class="formTextExtraCenter">vs</span> <input type="text" name="fighter_b_1" id="fighter_b_1" value="" />
        </div>
        <div class="formRow">
            <label for="fighter_a_pay_1">Fighter Pay $</label>
            <input type="text" name="fighter_a_pay_1" id="fighter_a_pay_1" value="" /> <span class="formTextExtraCenter">vs</span> <input type="text" name="fighter_b_pay_1" id="fighter_b_pay_1" value="" />
        </div>
        <div class="formRow">
            <label for="winner_1">Winner</label>
            <input type="text" name="winner_1" id="winner_1" value="" />
        </div>
        <div class="formRow">
            <label for="method_1">Method</label>
            <input type="text" name="method_1" id="method_1" value="" />
        </div>
        <div class="formRow">
            <label for="method_type_1">Method Type</label>
            <input type="text" name="method_type_1" id="method_type_1" value="" />
        </div>
        <div class="formRow">
            <label for="round_1">Round</label>
            <input type="text" name="round_1" id="round_1" class="fieldSmall" value="" />
        </div>
        <div class="formRow">
            <label for="time_1">Time</label>
            <input type="text" name="time_1" id="time_1" class="fieldSmall" value="" />
        </div>
        <div class="formRow">
            <label for="fight_number_1">Fight #</label>
            <input type="text" name="fight_number_1" id="fight_number_1" class="fieldSmall" value="" />
        </div>
    </div>
    <div class="formRowRepeatingSection">
            <a href="#" class="buttonGray buttonRight addFight">Add Fight</a>
        </div>
    <div class="formRow">
        <input type="submit" class="submitButton" value="Save Fights" />
    </div>
</form>

JS CODE

<script type="text/javascript">
    // Add a new repeating section
    var attrs = ['for', 'id', 'name'];

    function resetAttributeNames(section) {
        var tags = section.find('input, label'), idx = section.index();
        tags.each(function () {
            var $this = $(this);
            $.each(attrs, function (i, attr) {
                var attr_val = $this.attr(attr);
                if (attr_val) {
                    $this.attr(attr, attr_val.replace(/_\d+$/, '_' + (idx + 1)))
                }
            })
        })
    }

    $('.addFight').click(function (e) {
        e.preventDefault();
        var lastRepeatingGroup = $('.repeatingSection').last();
        var cloned = lastRepeatingGroup.clone(true)
        cloned.insertAfter(lastRepeatingGroup);
        resetAttributeNames(cloned)
    });

    // Delete a repeating section
    $('.deleteFight').click(function (e) {
        e.preventDefault();
        var current_fight = $(this).parent('div');
        var other_fights = current_fight.siblings('.repeatingSection');
        if (other_fights.length === 0) {
            alert("You should atleast have one fight");
            return;
        }
        current_fight.slideUp('slow', function () {
            current_fight.remove();

            // reset fight indexes
            other_fights.each(function () {
                resetAttributeNames($(this));
            })

        })


    });



</script>

此输入字段名称中的

与name="fighter_a_id_1"类似，用于替换表达式为$this.attr(attr, attr_val.replace(/_\d+$/, '_' + (idx)))

我希望输入字段名称如name="Jobs[0].AssignedTo"，我想增加数量以便如何编写表达式，我需要这样的名称，因为它是asp.net mvc

所必需的

所以请帮帮我......！

Answer 1

试试这个

您可以使用data- *属性作为名称和ID模板，克隆该元素时，您可以用您想要的数字替换它

＆＃13;

function AddControl(){
  var inpt = $(".dummyinput").clone();
  var IdCount = 0;

  $(inpt).addClass("workinginput").removeClass("dummyinput");

  IdCount = $(".workinginput").length;

  $(inpt).attr("id",$(inpt).data("id").replace("__ID__",IdCount));
  $(inpt).attr("name",$(inpt).data("name").replace("__NAME__",IdCount));

  $("div").append($(inpt));
}
AddControl();
AddControl();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' class='dummyinput' data-id='controlId[__ID__]' data-name='controlName[__NAME__]'>

<div>

</div>

＆＃13;

Answer 2

这对我有用

$this.attr(attr, attr_val.replace(/\[\d\]/,'['+(idx)+']'))

如何更改克隆时输入字段的ID和名称

2 个答案: