点击时无法增加javascript变量

Question

我正在生成表单，并在名称字段中给每个生成的表单一个前缀。 我之前做过几次增量操作，但是某些原因导致变量不增加。 这本质上就是代码。

// Start at 2 because form 1 is in document already
var food_number = 2;
var food_form = '<input name="food_name_' + food_number + '"/>';

$(document).ready(function()
{
    $('#add_food_form').click( function(){
        $('#food-forms-cnt').append(food_form);
        food_number = food_number + 1;
    });
});

我在增量线上尝试了以下变体。

food_number = food_number + 1;
food_number++;
++food_number;

以及创建一个单独的变量i并使用它来增加变量food_number。 我创建的每个表单的结果都是这样。

<input name="food_name_2"/>

我猜想当函数完成时，变量不会保留新值。 那是对的吗？ 如果是这样，如何让变量保持其值。 如果那是不正确的，那是怎么回事。

Answer 1

您的food_form始终具有名称food_name_2因为您没有更新它。 您只是在更新food_number 。

您可能会认为food_form将自动更新，因为它具有food_number的引用，但事实并非如此，因为food_form现在只是一个String ，而没有有关food_number的引用的信息。

$(document).ready(function() {
    $('#add_food_form').click(function(){
        $('#food-forms-cnt').append($('<input />', {
            name: "food_name_" + (food_number++)
        }));
    });
});

Answer 2

您已成功在处理程序中递增food_number ，问题是您已将其串联到food_form HTML字符串中。 要修复它，您必须在处理程序中重新生成字符串：

// Start at 2 because form 1 is in document already
var food_number = 2;
var food_form_tem = '<input name="food_name_${food_number}"/>';

$(document).ready(function()
{
    $('#add_food_form').click( function(){
        food_form = food_form_tem.replace('${food_number}',food_number);
        $('#food-forms-cnt').append(food_form);
        ++food_number;
    });
});

http://jsfiddle.net/d1vf4amq/