添加到购物车的总数

时间:2017-04-30 16:41:42

标签: javascript jquery html css

我需要将总数添加到购物车中。我需要为购物车添加的每件商品累计。我该怎么做?您看到的代码被注释掉了,就像我添加到总数中一样。谢谢。

http://codepen.io/jayj10080/pen/pPPJxN?editors=0011

var products = [
  {
    "id": 0,
    "available": true,
    "price": "2936.72",
    "picture": "http://placehold.it/32x32",
    "description": "duis sint Lorem irure velit do sint sunt ipsum incididunt occaecat dolor consequat minim ea",
    "title": "non magna"
  },
  {
    "id": 1,
    "available": true,
    "price": "2759.28",
    "description": "dolore ipsum dolore fugiat ut minim magna voluptate Lorem quis Lorem irure velit elit dolore",
    "title": "ullamco irure"
  },
  {
    "id": 2,
    "available": false,
    "price": "2278.79",
    "picture": "http://placehold.it/32x32",
    "description": "quis velit et culpa et id dolor aute voluptate et non excepteur nostrud consequat consequat",
    "title": "sit exercitation"
  },
  {
    "id": 3,
    "available": true,
    "price": "2389.79",
    "picture": "http://placehold.it/32x32",
    "description": "et aliquip veniam velit sit ex Lorem laborum proident Lorem et cupidatat culpa cupidatat ipsum",
    "title": "ea ipsum"
  },
  {
    "id": 4,
    "available": true,
    "price": "1899.72",
    "description": "eu esse do ea sint cupidatat in incididunt non pariatur quis veniam minim anim irure",
    "title": "aliquip aliquip"
  }
]

//This is where the state of our program will live

var cart = [];

function createProduct (product) {
  if (product.available) {
    var container = $('<div id="product-'+product.id+'">');
    container.addClass("product");

    var productImg = $('<img>');
    if (product.picture) {
      productImg.attr('src',product.picture);
    } else {
      productImg.attr('src', "http://lorempixel.com/32/32");
    }
    container.append(productImg);

    var title = $('<h4>');
    title.text(product.title);
    container.append(title);

    var price = $('<div>');
    price.text("$"+product.price);
    price.addClass("price"); 
    container.append(price);

    var description = $('<p>');
    description.text(product.description);
    container.append(description);
    return container;
  }
}
//function getProductPrice(object){
  //var price = parseFloat(object.price);
  //return price;
//}
var productList = $('.productList');

for (var i=0; i<products.length; i++) {
  var productContainer = createProduct(products[i]);

  // productPrice = getProductPrice(products[i]);
  var buyNowButton = $("<button>Buy Now!</button>");

   if (productContainer) {
    productContainer.append(buyNowButton);
    var clickHandler = function(event){ 
    $(event.target).is("button");
    $(".cart").append(this);
    }
    productContainer.click(clickHandler);
     //$(".total").text("Total: $" + productPrice);
    productList.append(productContainer);

  }
}

2 个答案:

答案 0 :(得分:0)

以下是将您的所有内容放入页面中的ID,然后解析total中每个项目的价格并添加到总数中的方法。

clickHandler
var products = [
  {
    id: 0,
    available: true,
    price: "2936.72",
    picture: "http://placehold.it/32x32",
    description: "duis sint Lorem irure velit do sint sunt ipsum incididunt occaecat dolor consequat minim ea",
    title: "non magna"
  },
  {
    id: 1,
    available: true,
    price: "2759.28",
    description: "dolore ipsum dolore fugiat ut minim magna voluptate Lorem quis Lorem irure velit elit dolore",
    title: "ullamco irure"
  },
  {
    id: 2,
    available: false,
    price: "2278.79",
    picture: "http://placehold.it/32x32",
    description: "quis velit et culpa et id dolor aute voluptate et non excepteur nostrud consequat consequat",
    title: "sit exercitation"
  },
  {
    id: 3,
    available: true,
    price: "2389.79",
    picture: "http://placehold.it/32x32",
    description: "et aliquip veniam velit sit ex Lorem laborum proident Lorem et cupidatat culpa cupidatat ipsum",
    title: "ea ipsum"
  },
  {
    id: 4,
    available: true,
    price: "1899.72",
    description: "eu esse do ea sint cupidatat in incididunt non pariatur quis veniam minim anim irure",
    title: "aliquip aliquip"
  }
];

//This is where the state of our program will live

var cart = [];

function createProduct(product) {
  if (product.available) {
    var container = $('<div id="product-' + product.id + '">');
    container.addClass("product");

    var productImg = $("<img>");
    if (product.picture) {
      productImg.attr("src", product.picture);
    } else {
      productImg.attr("src", "http://lorempixel.com/32/32");
    }
    container.append(productImg);

    var title = $("<h4>");
    title.text(product.title);
    container.append(title);

    var price = $("<div>");
    price.text("$" + product.price);
    price.addClass("price");
    container.append(price);

    var description = $("<p>");
    description.text(product.description);
    container.append(description);
    return container;
  }
}
//function getProductPrice(object){
//var price = parseFloat(object.price);
//return price;
//}
var productList = $(".productList");

for (var i = 0; i < products.length; i++) {
  var productContainer = createProduct(products[i]);

  // productPrice = getProductPrice(products[i]);
  var buyNowButton = $("<button>Buy Now!</button>");

  if (productContainer) {
    productContainer.append(buyNowButton);
    var clickHandler = function(event) {
      $(event.target).is("button");
      $(".cart").append(this);
      var price = parseFloat($(this).find('.price').text().replace(/^[\D+\.+]/g, "")),
          $total = $('#total');
      $total.text(parseFloat($total.text()) + price);
    };
    productContainer.click(clickHandler);

    //$(".total").text("Total: $" + productPrice);
    productList.append(productContainer);
  }
}
img {
  display: block;
}

h4 {
  margin: 0px 10px 0px 0px;
  display: inline;
}

.price {
  display: inline;
}

.product {
  display: block;
  width: 400px;
  margin: 5px 5px 5px 5px;
}

.cart {
  border: 1px solid black;
  margin: 5px 5px 5px 5px;
}

答案 1 :(得分:0)

void *p = (int *)basepointer + 32;  // use int-wise arithmetic to compute p