問題:我的網站上有一個簡單的店面,允許用戶選擇數量然后添加到購物車。我遇到的問題是當用戶添加到購物車時,該功能正在抓取<select> <option>html 文件中的第一個。結果是添加到購物車的任何項目都是按第一個選擇器數量添加的。我避免使用 id 并將它們傳遞給函數,因為在某些時候所有店面項目都會被動態加載。這是我的第一次 Web 開發經驗。預期結果:為項目選擇數量并添加到購物車時,數量應取決于“最近”的數量。我的理解:在我addQty();下面的函數中var e = document.getElementByClassName("qty);",應該得到最接近函數調用的“數量”類。我不知道該怎么做。代碼:下面是一個item card html的樣子(有多個item cards)和我寫的JS函數。* HTML<div class="card-footer"> <select class="qty"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> <button onclick="addQty();">Add to Cart</button></div>JSfunction addQty(){ var e = document.getElementClassName("qty"); var qty = e.options[e.selectedIndex].value; var s = { //Reset the cart session to remove everything added to the cart previously. 'reset':true, //Define the product path(s) and the quantity to add. 'products' : [ { 'path':'test-product', 'quantity': qty } ], 'checkout': false } fastspring.builder.push(s);}感謝您的幫助。我的解決方案 我在每個產品的 DOM 中的較高位置添加了一個 productID。然后在 querySelector() 調用中使用它來識別正在引用哪個選擇。<div class="column" id="test-product-2"> <div class="card-footer"> <select class="qty"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> <button onclick="addQty('test-product-2');">Add to Cart</button> </div></div>
如何使用 JavaScript 獲取類的最接近函數調用的元素
湖上湖
2023-04-27 16:54:37