Question

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

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

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

到目前为止，这是我的工作，我还没有为实际购物车创建代码，但是据我所知，无论我使用的是哪种形式，我都做错了任何产品，无论产品如何，输出都是相同的。

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>

Answer 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

附加购物车后，如何为表格提供特定的ID

1 个答案: