將產品信息添加到購物車

Question

我有一個向其添加項目的購物車功能，但是我無法通過它添加該項目的詳細信息。 現在，它只是提取通用數據，我希望它可以獲取產品標題，位置和日期。 我知道有一種獲取HTML文本的方法，但是不知道如何將其添加到此腳本中。 這是HTML標記：

 var cartOpen = false; var numberOfProducts = 0; $('body').on('click', '.js-toggle-cart', toggleCart); $('body').on('click', '.js-add-product', addProduct); $('body').on('click', '.js-remove-product', removeProduct); function toggleCart(e) { e.preventDefault(); if (cartOpen) { closeCart(); return; } openCart(); } function openCart() { cartOpen = true; $('body').addClass('open'); } function closeCart() { cartOpen = false; $('body').removeClass('open'); } function addProduct(e) { e.preventDefault(); openCart(); $('.js-cart-empty').addClass('hide'); var product = $('.js-cart-product-template').html(); $('.js-cart-products').prepend(product); numberOfProducts++; } function removeProduct(e) { e.preventDefault(); numberOfProducts--; $(this).closest('.js-cart-product').hide(250); if (numberOfProducts == 0) { $('.js-cart-empty').removeClass('hide'); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <article class="cards-item"> <figure class="card product"> <div class="card-image card-image-2lc"></div> <figcaption class="card-content"> <h1 class="card-title">McElroy</h1> <h2 class="card-title product__title">2LC Fusion Machine 1/2" CTS - 2" IPS Pipe</h2> <p class="card-text">The 2LC employs a semi-automatic locking cam (LC) system to maintain force during the cooling cycle. It incorporates McElroy's patented Centerline Guidance System and is designed to butt fuse tees, ells and other fittings.</p> <form action="" method=""> <fieldset class="product"> <div class="formrow"> <div class="formitem col1"> <label class="label req" for="pu-2lc">Pick Up Date</label> <input type="date" name="pu-2lc" id="pu-2lc/> </div> </div> <div class=" formrow "> <div class="formitem col1 "> <label class="label req " for="rd-2lc ">Return Date</label> <input type="date " name="rd-2lc " id="rd-2lc "/> </div> </div> <div class="formrow "> <div class="formitem col1of2 "> <label class="label " for="country ">Country</label> <select name="country " id="country " x-autocompletetype="country-name "> <option selected="selected ">please choose</option> <option value="bkf ">Bakersfield</option> <option value="ch ">Chico</option> <option value="fsn ">Fresno</option> <option value="hyw ">Hayward</option> <option value="mtc ">Manteca</option> <option value="oak ">Oakley</option> <option value="rwc ">Redwood City</option> <option value="sac ">Sacramento</option> <option value="sal ">Salinas</option> <option value="sj ">San Jose</option> <option value="sjf ">San Jose Fusion</option> <option value="sr ">Santa Rosa</option> </select> </div> </div> </fieldset> <div class="buttons "> <div class="back "> <button class="primary button js-add-product " title="Add to cart " >Add to Cart</button> </div> </div> </form> </figcaption> </figure> </article> <aside class="cart js-cart "> <div class="cart__header "> <h1 class="cart__title ">Shopping cart</h1> <p class="cart__text "> <a class="button button--light js-toggle-cart " href="# " title="Close cart "> Close cart </a> </p> </div> <div class="cart__products js-cart-products "> <p class="cart__empty js-cart-empty "> Add a product to your cart </p> <div class="cart__product js-cart-product-template "> <article class="js-cart-product "> <h1>Product title</h1> <p>Pick up Date</p> <p>Return Date</p> <p>Location</p> <p> <a class="js-remove-product " href="# " title="Delete product "> Delete product </a> </p> </article> </div> </div> <div class="cart__footer "> <p class="cart__text "> <a class="button " href="# " title="Buy products "> Buy products </a> </p> </div> </aside> 

謝謝你的幫助。

Answer 1

這將選擇產品的文本__title

$('.product__title').text()

這將使國家/地區選項選擇文本和值

$('#country option:selected').val()
$('#country option:selected').text()

這會得到你的約會

$('#pu-2lc').val()

收到文字后，可以將其放置在所需的位置。 只是查看代碼，您似乎想要在addProduct（）方法中獲取這些值。 請讓我知道這是否是您想要的。 如果我們有自己的購物車代碼，我可以提供更多的見解。