Question

订单页面有一部分，用户可以在其中添加新字段以添加新产品。这里的问题是，每次用户添加新字段时，新字段的名称都应为PRODUCTNAME1，PRODUCTNAME2，PRODUCTNAME3等。现在，添加的每个新字段都有1个值。它卡在那里。我希望我有所了解。

$('#AddProduct').click(function() {
    var i = 0;
    var adding = $(+(i++)+'<div class="row'+(i)+'"><div class="column width50"><input type="text" id="PRODUCTNAME" name="PRODUCTNAME'+(i)+'" value="" class="width98" /><input type="hidden" class="PRODUCTID" name="PRODUCTID" /><input type="hidden" class="UNITPRICE" name="UNITPRICE'+(i)+'" value="" /><input type="hidden" class="TOTALPRICE" name="TOTALPRICE'+(i)+'" value="" /><small>Search Products</small></div><div class="column width20"><input type="text" class="UNITQUANTITY" name="UNITQUANTITY'+(i)+'" value="1" class="width98" /><small>Quantity</small></div><div class="column width30"><span class="prices">Unit Price:<span class="UNITPRICE"></span><br />Total Price:<span class="TOTALPRICE"></span><br /><a href="#" id="RemoveProduct(".row'+(i)+'");">Remove</a></span></div>');    
    $('#OrderProducts').append(adding);

    adding.find("#PRODUCTNAME").autocomplete("orders.cs.asp?Process=ListProducts", {
        selectFirst: false
    }).result(function(event, data, formatted) {
        if (data) {
            adding.find(".UNITPRICE").val(data[1]);
            adding.find(".UNITPRICE").html(data[1]);
            adding.find(".PRODUCTID").val(data[2]);
            adding.find(".TOTALPRICE").val(data[1] * $('.UNITQUANTITY').val()); 
            adding.find(".TOTALPRICE").html(data[1] * $('.UNITQUANTITY').val()); 
        }
    });

    adding.find(".UNITQUANTITY").change(function()
    {
        adding.find(".TOTALPRICE").val(adding.find(".UNITPRICE").val() * adding.find(".UNITQUANTITY").val()); 
        adding.find(".TOTALPRICE").html(adding.find(".UNITPRICE").val() * adding.find(".UNITQUANTITY").val()); 
    });


    return false;
});

Answer 1

每次调用i时，

$('#AddProduct').click()都会重置为0;我不认为这就是你想要的。您需要在传递给i的函数之外声明$('#AddProduct').click()。一种方法是通过closure。

（注意：我没有测试过这个。）

var onClick = (function() {
    var i = 0;
    return (function () {
        var adding = $(+(i++)+'<div class="row'+(i)+'"><div class="column width50"><input type="text" id="PRODUCTNAME" name="PRODUCTNAME'+(i)+'" value="" class="width98" /><input type="hidden" class="PRODUCTID" name="PRODUCTID" /><input type="hidden" class="UNITPRICE" name="UNITPRICE'+(i)+'" value="" /><input type="hidden" class="TOTALPRICE" name="TOTALPRICE'+(i)+'" value="" /><small>Search Products</small></div><div class="column width20"><input type="text" class="UNITQUANTITY" name="UNITQUANTITY'+(i)+'" value="1" class="width98" /><small>Quantity</small></div><div class="column width30"><span class="prices">Unit Price:<span class="UNITPRICE"></span><br />Total Price:<span class="TOTALPRICE"></span><br /><a href="#" id="RemoveProduct(".row'+(i)+'");">Remove</a></span></div>');    

        $('#OrderProducts').append(adding);

        adding.find("#PRODUCTNAME").autocomplete("orders.cs.asp?Process=ListProducts", {
            selectFirst: false
        }).result(function(event, data, formatted) {
            if (data) {
                adding.find(".UNITPRICE").val(data[1]);
                adding.find(".UNITPRICE").html(data[1]);
                adding.find(".PRODUCTID").val(data[2]);
                adding.find(".TOTALPRICE").val(data[1] * $('.UNITQUANTITY').val()); 
                adding.find(".TOTALPRICE").html(data[1] * $('.UNITQUANTITY').val()); 
            }
        });

        adding.find(".UNITQUANTITY").change(function()
        {
            adding.find(".TOTALPRICE").val(adding.find(".UNITPRICE").val() * adding.find(".UNITQUANTITY").val()); 
            adding.find(".TOTALPRICE").html(adding.find(".UNITPRICE").val() * adding.find(".UNITQUANTITY").val()); 
        });

        return false;
    });
})();

$('#AddProduct').click(onClick);

Answer 2

这段代码需要做很多工作。我确实想提出一个建议：不是在javascript变量中有一个大量的转义HTML字符串，你应该创建一个模板DOM元素并在需要它时复制它：

$("#AddProduct").click(function(){
  var newProd = $("#template").clone().removeAttr("id").removeAttr("style");
  /* change values, then add to the DOM */
  $("#OrderProducts").append(newProd);
});

-

<div class="row1" id="template" style="display:none" >
  <div class="column width50">
    <input type="text" id="PRODUCTNAME" name="PRODUCTNAME1" value="" class="width98" />
    <input type="hidden" class="PRODUCTID" name="PRODUCTID" />
    <input type="hidden" class="UNITPRICE" name="UNITPRICE1" value="" />
    <input type="hidden" class="TOTALPRICE" name="TOTALPRICE1" value="" />
    <small>Search Products</small>
  </div>
  <div class="column width20">
    <input type="text" class="UNITQUANTITY" name="UNITQUANTITY1" value="1" class="width98" />
    <small>Quantity</small>
  </div>
  <div class="column width30">
    <span class="prices">
      Unit Price:<span class="UNITPRICE"></span><br />
      Total Price:<span class="TOTALPRICE"></span><br />
      <a href="#" id="RemoveProduct1">Remove</a>
    </span>
  </div>
</div>

Answer 3

拿这段代码，例如：

'<input type="text" id="PRODUCTNAME" name="PRODUCTNAME'+(i)+'"
    value="" class="width98" />'

您为每个输入指定了不同的名称，但ID相同。与微软的想法相反，这两者是不可互换的。

为什么身份证号码不会跳到下一个

3 个答案: