附加购物车时如何为表单提供特定的 ID答案

【问题标题】：How do I give a form a specific ID for a cart when it's appended附加购物车时如何为表单提供特定的 ID
【发布时间】：2019-05-14 09:51:43
【问题描述】：

我有一个网页，如果您单击产品名称，它会打开产品描述以及显示“添加到购物车”的表单。这不起作用。

我的所有产品上都会显示相同的表单，因此无论我选择哪种产品，它都不会指定我要添加到购物车的产品，因为它已附加到所有产品中。

我希望它能够工作，以便我可以单击产品名称，描述和表单会在同一页面上弹出（这部分正在工作）但是当我将数量更改为数字时，然后单击“添加到购物车” ' 在表单上，它有自己的唯一标识符，我实际上可以将其作为自己的产品输入到购物车中。

这是我到目前为止所拥有的，我还没有为我的实际购物车创建代码，但我知道我做错了什么，就我所看到的而言，无论我使用的是什么形式任何产品，无论哪种产品，输出都是相同的。

function drawPage() {
  $.get('/products', function(data) {
    console.log(data);
    var prod = data.products;

    for (var i = 0; i < prod.length; i++) {
      var el = document.createElement('P');
      el.innerHTML = prod[i].name;
      el.addEventListener('click', function(event) {
        console.log(event.target.textContent);
        for (var i = 0; i < prod.length; i++) {
          if (prod[i].name == event.target.textContent) {
            $('#pro').html('');
            $('#pro').html(prod[i].name +
              prod[i].description + '<img src=' + prod[i].image_url + '>' + "Price: " +
              prod[i].unit_cost);

            $("#pro").append(
              $("<form/>", {
                action: '#',
                method: '#'
              }).append($("<input/>", {
                type: 'number',
                id: 'pro',
                name: 'productname',
                placeholder: 'Quantity'
              }), $("<br/>"), $("<input/>", {
                type: 'submit',
                id: 'submit',
                value: 'Add to Cart'
              }))
            )
          }
        }
      })
      $('#app').append(el);
    }
  })
}

document.addEventListener('load', drawPage());

<div id="cart-container">
  <h1>My Cart</h1>
  <table id="myCart" border="1">
    <tr>
      <th>Item name</th>
      <th>Qty</th>
      <th>Price</th>
      <th>Total</th>
    </tr>
    <tr style="display: none; border-top: 2px solid black">
      <td colspan="3">Subtotal</td>
      <td class="right subtotal"></td>
    </tr>
  </table>
</div>

【问题讨论】：

除了问题中的问题，您的最后一行代码必须是document.addEventListener('load', drawPage);，因为您需要将drawPage 的reference 传递给处理程序，而不是函数调用的结果。

标签： javascript jquery html forms

【解决方案1】：

我只是假设您的产品是几个 json 格式的对象，然后您可以传递它们：

var products = [
{id: 1, name: 'Product 1', desc: 'product 1 desc'},
{id: 2, name: 'Product 2', desc: 'product 2 desc'},
{id: 3, name: 'Product 3', desc: 'product 3 desc'},
{id: 4, name: 'Product 4', desc: 'product 4 desc'},
];

$.each(products, function() {
    addProduct(this);
});

function addProduct(product) {
    var link = $('<button></button>').text(product.name);
    link.on('click', function(){
        loadProduct(product);
    });
    $('#products').append(link);
}

function loadProduct(product) {
    $('#product-display').empty();
    var desc = $('<div></div>').html(product.name + '<br/>' + product.desc);
    var btn = $('<button></button>').text('add').on('click', function() {
        addToCart(product);
    });
    $('#product-display').append(desc).append(btn);
}

function addToCart(product) {
    $('#cart').append($("<span></span>").text(product.name));
    $('#cart').append("<br/>")
};

html:

<div id="products"></div>
<div id="product-display"></div>
<div id="cart"></div>

jsfiddle

【讨论】：