Javascript 如何更新计数器并用单击按钮替换文本

我有一个表单，人们可以通过一个按钮添加更多的输入

javascript函数克隆了“origin item”，但我似乎无法让函数正确更新

\id\u nested-TOTAL\u表单中的值

，

\uuuuuuu前缀

没有被计数器编号替换，它只是复制并添加

\uuu前缀

，而不是

1

或

2

等等

有人知道这个函数有什么问题吗

在此处找到脚本：

名称

变量前缀='嵌套'；
var MAX_FORMS='1000'；
var MIN_FORMS=1；
/*
*在此处对给定项目执行任何增强
*例如，添加日期选择器小部件、弹出窗口等。
*/
功能增强项（项）{
$（'.btn.delete'，item）.popover({
抵销：10
});
}
函数增强项（）{
$（'.item'）。每个（函数（）{
加强项目（本）；
});
}
/*
*enhanceItem（）的反面
*/
功能项目（项目）{
$（'.btn.delete'，item）.unbind（）；
}
函数项（）{
$（'.item'）。每个（函数（）{
（本）项目；
});
}
$（文档）.ready（函数（）{
增强项（）；
});
函数getFormCount（）{
返回parseInt（$（'#id'+prefix+'-TOTAL_FORMS'）.val（）；
}
函数updateFormCount（newValue）{
$（'#id'+prefix+'-TOTAL_FORMS'）.val（newValue）；
}
/*
* ====================================================
*一般说明：“表格”和“项目”在某种程度上可以互换使用。
* ====================================================
*/
$.fn.clearForm=函数（）{
返回此值。每个（函数（）{
var type=this.type，tag=this.tagName.toLowerCase（）；
如果（标记=='form'）
返回$（'：input'，this.clearForm（）；
如果（类型=='text'| |类型=='password'| |标记=='textarea'）
这个值=“”；
else if（类型=='复选框'| |类型=='收音机'）
此项检查=错误；
else if（标记==“选择”）
this.selectedIndex=-1；
});
};
/*
*给定一个元素，此函数将替换给定的字符串/regex
*在元素中使用另一个指定的替换（新的_值）
*/
函数更新元素（el、target_regex、replacement）{
var id_regex=目标_regex；
如果（$（el）.attr（“for”））{
$（el）.attr（“for”，$（el）.attr（“for”）.replace（id_regex，replacement））；
}
如果（标高id）{
el.id=el.id.replace（id_regex，替换）；
//更新隐藏ID的值
//此隐藏ID表示模型实例的ID
var hidden_ID_patt=new RegExp（'ID_（'+prefix+'-\\d+-ID'）；
//仅在ID存在时更新（即，如果存在相应的模型实例）
if（隐藏的识别号和部分测试（el.ID））{
$（el）.val（新值+1）；
}
}
如果（el.name）{
el.name=el.name.replace（id_regex，replacement）；
}
}
/*
*给定一个元素，此函数将替换（第一次？）出现的数字
*跟在特定前缀后面的（例如“exampleprefix-n”）
*在元素中使用另一个指定的数字（新的_值）
*其中n是一个数字
*/
函数updateElementIndex（el、前缀、新值）{
var id_regex=new RegExp（“（“+前缀+”-\\d+-）”）；
var替换=前缀+'-'+新的_值+'-'；
更新元素（此，id_regex，替换）；
}
函数重新应用增强功能（）{
//应用一些新的增强功能
减少项目（）；
增强项（）；
}
/*
*btn=触发此操作的按钮（或链接或某些源对象）
*prefix=表单集中使用的前缀（？）
*/
函数附加项（btn，前缀）{
var formCount=getFormCount（）；
//在继续此函数之前，您可能希望/希望执行一些验证
//即在添加项目之前
//在本例中，我将其限制为最大表单数
if（表格计数<最大表格数）{
//从第一个项目克隆项目（不带事件处理程序）
//var item=$（“.item:first”）.clone（false）.get（0）；
//克隆源项
var item=$（“#原始项”）.clone（false）.get（0）；
$（项目）.removeAttr（“id”）；
$（项目）.removeClass（“隐藏”）；
//明确其价值观
$（'：input'，item）.clearForm（）；
//将其插入最后一项之后
$（item）.removeAttr（'id'）.hide（）.insertAfter（“form.item:last”）.slideDown（300）；
$（'：输入，标签'，项）。每个（函数（）{
//重新标记/重命名所有相关位
//“_前缀__”来自#源项
//参见“空表格”：https://docs.djangoproject.com/en/1.4/topics/forms/formsets/#empty-形式
var target_regex=new RegExp（'（'+前缀+'-'前缀'-）；
变量替换=前缀+'-'+formCount+'-'；
更新元素（此、目标、替换）；
//删除错误类
$（此）.removeClass（“错误”）；
});
重新应用增强功能（）；
//更新表格总数（在管理表格中）
updateFormCount（formCount+1）；
}
否则{
//可以使用其他技术而不是JS警报通知用户
提醒（“对不起，您最多只能有“+MAX_FORMS+”个目标。”）；
}
}
/*
*重新标记所有项目
*/
函数relabelItems（）{
var forms=$（'.item'）；//获取所有表单
//更新表格总数（可能比以前少1张）
$（'#id'+prefix+'-TOTAL#u FORMS'）.val（FORMS.length）；
var i=0；
//检查表单并设置它们的索引、名称和ID
for（formCount=forms.length；i<input id="id_nested-TOTAL_FORMS" name="nested-TOTAL_FORMS" type="hidden" value="1">    
<input id="id_nested-INITIAL_FORMS" name="nested-INITIAL_FORMS" type="hidden" value="0">
<input id="id_nested-MAX_NUM_FORMS" name="nested-MAX_NUM_FORMS" type="hidden" value="1000">


<div id="origin-item" class="hide item">
    <div id="div_id_nested-__prefix__-name">
        <label for="id_nested-__prefix__-name">Name</label>
    <div class="controls col-lg-10">
        <input id="id_nested-__prefix__-name" name="nested-__prefix__-name" type="text" />
    </div>
</div>


<p><a id="add-new-item" href="#">Add new person</a></p>




<script type="text/javascript">

var prefix = 'nested';
var MAX_FORMS = '1000';
var MIN_FORMS = 1;

/*
 * Perform any enhancements you'd like to a given item here
 * e.g. add datepicker widgets, popovers etc.
 */
function enhanceItem(item) {    
    $('.btn.delete', item).popover({
            offset: 10
    });
}

function enhanceItems() {       
        $('.item').each(function() {
                enhanceItem(this);
        });
}

/*
 * The opposite of enhanceItem()
 */
function diminishItem(item) {   
        $('.btn.delete', item).unbind();
}

function diminishItems() {      
        $('.item').each(function() {
                diminishItem(this);
        });
}


$(document).ready(function() {
        enhanceItems();
});


function getFormCount() {
    return parseInt($('#id_' + prefix + '-TOTAL_FORMS').val());
}

function updateFormCount(newValue) {
    $('#id_' + prefix + '-TOTAL_FORMS').val(newValue);
}



/*
 * ====================================================
 * General Notes: 'Form' and 'Item' are used somewhat interchangeably.
 * ====================================================
 */
$.fn.clearForm = function() {
  return this.each(function() {
    var type = this.type, tag = this.tagName.toLowerCase();
    if (tag == 'form')
      return $(':input',this).clearForm();
    if (type == 'text' || type == 'password' || tag == 'textarea')
      this.value = '';
    else if (type == 'checkbox' || type == 'radio')
      this.checked = false;
    else if (tag == 'select')
      this.selectedIndex = -1;
  });
};


/*
 * Given an element, this function replaces a given string/regex
 * with another specified replacement (new_value) within the element
 */
function updateElement(el, target_regex, replacement) {
        var id_regex = target_regex;

        if ($(el).attr("for")) {
                $(el).attr("for", $(el).attr("for").replace(id_regex, replacement));
        }
        if (el.id) {
                el.id = el.id.replace(id_regex, replacement);

                // Update the value of the hidden ID
                // This hidden ID represents the ID of the model instance
                var hidden_ID_patt = new RegExp('id_(' + prefix + '-\\d+)-id');
                // Only update if an ID exists (i.e. if a corresponding model instance exists)
                if (hidden_ID_patt.test(el.id)) {
                    $(el).val(new_value + 1);
                }
        }
        if (el.name) {
                el.name = el.name.replace(id_regex, replacement);
        }
}


/*
 * Given an element, this function replaces (the first?) occurence of a number
 * that follows a specific prefix (e.g. 'exampleprefix-n')
 * with another specified number (new_value) within the element
 * where n is a number
 */
function updateElementIndex(el, prefix, new_value) {
        var id_regex = new RegExp('(' + prefix + '-\\d+-)');
        var replacement = prefix + '-' + new_value + '-';

        updateElement(this, id_regex, replacement);
}



function reapplyEnhancements() {
    // Apply some fresh enhancements 
    diminishItems();
    enhanceItems();
}



/*
 * btn = the button (or link or some source object) that instigated this action
 * prefix = the prefix used in the formset (?)
 */
function addItem(btn, prefix) {
        var formCount = getFormCount();

        // You might like/want to do some validation before proceeding in this function
        // i.e. before adding an item
        // In this case, I'm limiting it to max number of forms
        if (formCount < MAX_FORMS) {
            // Clone a item (without event handlers) from the first item
            //var item = $(".item:first").clone(false).get(0);
            // Clone the origin item
            var item = $("#origin-item").clone(false).get(0);
            $(item).removeAttr("id");
            $(item).removeClass("hide");
            // Clear its values
            $(':input', item).clearForm();

            // Insert it after the last item
            $(item).removeAttr('id').hide().insertAfter("form .item:last").slideDown(300);

            $(':input, label', item).each(function() {
                    // Relabel/rename all the relevant bits
                    // '__prefix__' comes from #origin-item
                    // see 'empty_form': https://docs.djangoproject.com/en/1.4/topics/forms/formsets/#empty-form
                    var target_regex = new RegExp('(' + prefix + '-__prefix__-)');
                    var replacement = prefix + '-' + formCount + '-';
                    updateElement(this, target_regex, replacement);
                    // Remove error classes
                    $(this).removeClass("error");
            });

            reapplyEnhancements();

            // Update the total form count (in the management form)
            updateFormCount(formCount + 1);

        }
        else {
            // Feel free to notify the user using some other technique instead of an JS alert
            alert("Sorry, you can only have a maximum of " + MAX_FORMS + " goals.");
        }
}


/*
 * Relabel all items
 */
function relabelItems() {
    var forms = $('.item'); // Get all the forms

    // Update the total number of forms (likely 1 less than before)
    $('#id_' + prefix + '-TOTAL_FORMS').val(forms.length);

    var i = 0;
    // Go through the forms and set their indices, names and IDs
    for (formCount = forms.length; i < formCount; i++) {
        $(":input, label", forms.get(i)).each(function() {
            updateElementIndex(this, prefix, i);
        });
    }
}


/*
 * Removes an item from a list of items
 */
function removeItem(btn, prefix) {
        var formCount = getFormCount();

        // Do some validation before proceeding
        // In this case, just make sure there is at least one item
        if (formCount > MIN_FORMS) {
            var item = $(btn).parents('.item');

            // Delete the item
            $("*", item).fadeOut();
            $(item).animate({'backgroundColor':'#fb6c6c'}, 300).slideUp('slow', function() { 
                    $(item).remove(); 
                    relabelItems(); 
            });

            // Apply enhancements
            enhanceItems();
        }
        else {
            // Feel free to notify the user using some other technique instead of an JS alert
            alert("Come on now, you need to have at least a minimum of " + MIN_FORMS + " item(s).");
        }
}


// JavaScript to create a new items/entries
$(document).ready(function() {
        $('#add-new-item').click(function(e) {
                addItem(this, prefix);
                return false;
        });

        $('a.delete').live("click", function(e) {
                removeItem(this, prefix);
                return false;
        });
});

</script>

$('#id_' + prefix + '-TOTAL_FORMS').val(newValue);

var target_regex = new RegExp('(' + prefix + '-__prefix__-)');