Question

在我的HTML表格中，有2个字段（数字和产品）和一个可点击的文字，可添加更多“数字”和“产品”字段。

请检查以下代码段：

$(document).ready(function() {
  var moreProducts = $('#MoreProducts');
  var extraProduct = $('<tr><td><label>Number: </label></td><td><input type="number" name="count' + i + '" maxlength="4" min="3" max="999"></td></tr><tr><td><label>Product: </label></td><td><input type="text" name="product' + i + '" maxlength="60"></td></tr>');

  moreProducts.click(function() {
    for (i = 0; i < 20; i++) {
      extraProduct.insertBefore('#MoreProductsFunction');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
  <td>
    <label>Number:</label>
  </td>
  <td>
    <input type="number" name="count" maxlength="4" min="3" max="999" required>*</td>
</tr>
<tr>
  <td>
    <label>Product:</label>
  </td>
  <td>
    <input type="text" name="product" maxlength="60" required>*</td>
</tr>
<tr id="MoreProductsFunction">
  <td><a id="MoreProducts">Add more products...</a>
  </td>
</tr>

对于#MoreProducts的每次点击，应在#MoreProductFunction之前插入一次具有唯一名称属性（count0，count1，count2 ...和product0，product1 ...）的var extraProduct。为什么我的代码不起作用，我应该怎么做？

PS：完成此操作后，我将使用PHP获取所有非空字段，将它们添加到mail（）函数中（这可能是编写此代码的重要考虑因素）。

Answer 1

ExtraProduct变量在定义之前使用了i。

尝试将该定义移动到循环中;

moreProducts.click(function(){
    var extraProduct;
    for (i = 0; i <= 20; i++) {
        extraProduct = $('<tr><td><label>Number: </label></td><td><input type="number" name="count'+ i +'" maxlength="4" min="3" max="999"></td></tr><tr><td><label>Product: </label></td><td><input type="text" name="product'+ i +'" maxlength="60"></td></tr>');
        extraProduct.insertBefore('#MoreProductsFunction');
    }

每次点击只需插入一次插入第二个点：

var count = 0;

moreProducts.click(function(){
    count++;
    if(count < 20){
        var extraProduct;
            extraProduct = $('<tr><td><label>Number: </label></td><td><input type="number" name="count'+ count +'" maxlength="4" min="3" max="999"></td></tr><tr><td><label>Product: </label></td><td><input type="text" name="product'+ count +'" maxlength="60"></td></tr>');
            extraProduct.insertBefore('#MoreProductsFunction');
}

Answer 2

var moreProducts = $('#MoreProducts');

var i=0;
moreProducts.click(function(){
    if(i<20){  
      var extraProduct = $('<tr><td><label>Number: </label></td><td><input type="number" name="count'+ i +'" maxlength="4" min="3" max="999"></td></tr><tr><td><label>Product: </label></td><td><input type="text" name="product'+ i +'" maxlength="60"></td></tr>');
      extraProduct.insertBefore('#MoreProductsFunction');
      i++;
    }

});

Answer 3

我认为这就是你一直在寻找的东西:)。

工作示例：https://jsfiddle.net/xaewj3aL/7/

HTML（让它更有条理）：

<table>
    <tr>
        <td><label>Number: </label></td>
        <td><input type="number" name="count" maxlength="4" min="3" max="999" required>*</td>
    </tr>
    <tr>
       <td><label>Product: </label></td>
       <td><input type="text" name="product" maxlength="60" required>*</td>      </tr>
   <tr id="MoreProductsFunction">
       <td><button id="MoreProducts">Add more products...</button></td>
    </tr>
</table>

jQuery的：

var count = 0;

$('#MoreProducts').click(function() {
    var extraProduct = $('<tr><td><label>Number: </label></td><td><input type="number" name="count'+ count +'" maxlength="4" min="3" max="999"></td></tr><tr><td><label>Product: </label></td><td><input type="text" name="product'+ count +'" maxlength="60"></td></tr>');
    count++;
    extraProduct.insertBefore('#MoreProductsFunction');
});

所以基本上我在循环之外添加了一个计数（否则，相同的数字将显示为ID）。

另外，我必须在click事件中声明extraProduct，因为你希望ID因计数而异，对吧？ :) 身份证号码会随着时间的推移而增加。

jQuery每次点击都会迭代一次

3 个答案: