function Product(id, description) { this.getId = function () { return id; }; this.getDescription = function () { return description; }; } function Cart(eventAggregator) { var items = []; this.addItem = function (item) { items.push(item); }; } var products = [ new Product(1, "Star Wars Lego Ship"), new Product(2, "Barbie Doll"), new Product(3, "Remote Control Airplane")], cart = new Cart(); (function () { function addToCart() { var productId = $(this).attr('id'); var product = $.grep(products, function (x) { return x.getId() == productId; })[0]; cart.addItem(product); var newItem = $('<li></li>') .html(product.getDescription()) .attr('id-cart', product.getId()) .appendTo("#cart"); } products.forEach(function (product) { $('<li></li>') .html(product.getDescription()) .attr('id', product.getId()) .dblclick(addToCart) .appendTo("#products"); }); })();
<div class="products-wrapper"> <h2>Products</h2> <ul id="products"></ul> </div> <div class="cart-wrapper"> <h2>Cart</h2> <ul id="cart"></ul> </div>
ul { border: 1px solid black; width: 200px; min-height: 100px; } .cart-wrapper { float: left; margin-left: 20px; } .products-wrapper { float: left; }