JavaScript循环调用时不遍历对象

Question

我有一个问题，当我点击我的'添加到购物车'按钮返回的唯一对象是顶部对象。我的添加到购物车按钮有正确的html类，因为它添加到购物车。

理想情况下，基于我所处的产品页面，当我单击"添加到购物车"按钮时，它应该遍历匹配对象的对象以检索该信息。

我已经包含了一个示例html页面，以防我在那里犯了一个错误，请注意，这是一个相当沉重的html文件。这是一个模板，但我试图用我自己的JS重做购物车JS，因为以前的JS很糟糕。

let carts = document.querySelectorAll('.item_add')

let products = [
{
name: "Philips 23.8 Full HD 144Hz FreeSync Gaming Monitor",
image: "images/Phillips Monitor.jpg",
price: 149.99,
inCart: 0
},
{
name: "LG 27 IPS Full HD 75Hz Monitor",
image: "images/LG IPS.jpg",
price: 249.99,
inCart: 0
},
{
name: 'Samsung 23.5 Full HD LED Curved Monitor',
image: 'images/Samsung Monitor.jpg',
price: 249.99,
inCart: 0
},
{
name: "Lenovo D27-30 27 Full HD Monitor",
image: "images/Lenovo Monitor.jpg",
price: 229.99,
inCart: 0
},
{
name: "Dell S2421HGF 24 Full HD 144Hz Gaming Monitor",
image: "images/Dell Monitor.jpg",
price: 229.99,
inCart: 0
},
];
for (let i = 0; i < carts.length; i++) {
carts[i].addEventListener('click', () => {
cartNumbers(products[i]);
})
}
function onLoadCartNumbers() {
let productNumbers = localStorage.getItem('cartNumbers');
if (productNumbers) {
document.querySelector('.cart span').textContent = productNumbers;
}
}
function cartNumbers(product) {
console.log("The product clicked is", product)
let productNumbers = localStorage.getItem('cartNumbers')

productNumbers = parseInt(productNumbers);

if (productNumbers) {
localStorage.setItem('cartNumbers', productNumbers + 1);
document.querySelector('.cart span').textContent = productNumbers + 1;
} else {
localStorage.setItem('cartNumbers', 1);
document.querySelector('.cart span').textContent = 1;

}
}

<前>============================================= -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>

<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>

<!-- Start Header Area --> <header class="header_area sticky-header"> <div class="main_menu"> <nav class="navbar navbar-expand-lg navbar-light main_box"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <a class="navbar-brand logo_h" href="index.html"><img src="img/Cware small.png" alt=""></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse offset" id="navbarSupportedContent"> <ul class="nav navbar-nav menu_nav ml-auto"> <li class="nav-item submenu dropdown"> <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Products</a> <ul class="dropdown-menu"> <li class="nav-item"><a class="nav-link" href="pchardware.html">PC Hardware</a></li> <li class="nav-item"><a class="nav-link" href="monitor.html">Monitors</a></li> <li class="nav-item"><a class="nav-link" href="keyboard.html">Keyboards</a></li> <li class="nav-item"><a class="nav-link" href="cable.html">Cables</a></li> <li class="nav-item"><a class="nav-link" href="audio.html">Audio</a></li> </ul> </li> </li> <li class="nav-item"><a class="nav-link" href="contact.html">Contact Us</a></li> <li class="nav-item"><a class="nav-link" href="about.html">About Us</a></li> <li class="nav-item submenu dropdown"> <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Account</a> <ul class="dropdown-menu"> <li class="nav-item"><a class="nav-link" href="login.html">Login</a></li> <li class="nav-item"><a class="nav-link" href="sign.html">Sign up</a></li> </ul> </li> <li class="nav-item cart"><a class="nav-link" href="cart.html">View Cart (<span class="">0</span>)</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li class="nav-item"> <button class="search"><span class="lnr lnr-magnifier" id="search"></span></button> </li> </ul> </ul> </div> </div> </nav> </div> <div class="search_input" id="search_input_box"> <div class="container"> <form class="d-flex justify-content-between"> <input type="text" class="form-control" id="search_input" placeholder="Search Here"> <button type="submit" class="btn"></button> <span class="lnr lnr-cross" id="close_search" title="Close Search"></span> </form> </div> </div> </header> <!-- End Header Area --> <!-- Start Banner Area --> <section class="banner-area organic-breadcrumb"> <div class="container"> <div class="breadcrumb-banner d-flex flex-wrap align-items-center justify-content-end"> <div class="col-first"> </nav> </div> </div> </div> </section> <!-- End Banner Area --> <div class="simpleCart_shelfItem"> <div class="product_image_area"> <div class="container"> <div class="row s_product_inner"> <div class="col-lg-6"> <br> <br> <br> <image class="item_image product_image" src="images/LG IPS.jpg" alt="LG 27 Inch IPS Full HD 75Hz Monitor" /> </div> <div class="col-lg-5 offset-lg-1"> <div class="s_product_text"> <div class="product"> <!--<image class="item_image product_image" src="images/Airpods 2.jpg" alt="Apple Airpods with Charging Case (2nd Gen)"/>--> <h2 class="item_name">LG 27 IPS Full HD 75Hz Monitor</h2> <p></p> <h2 class="item_price">$249.99</h2> <ul class="list"> <li><a class="" href="monitor.html"><span>Category:</span>Monitors</a></li> <li><a><span>Availibility:</span>In Stock</a></li> </ul> <p align="Justify">A great upgrade for your compatible computer setup, the LG 27-inch 27ML600 Full HD Monitor offers a large display and optimal picture quality for an immersive gaming and viewing experience.</p> <div class="product_count"> <label for="qty">Quantity:</label> <input type="text" value="1" class="item_Quantity" /><br /> </div> <div class="card_area d-flex align-items-center"> <a class="primary-btn item_add cart1" href="javascript:;">Add to Cart</a> <!--<a class="icon_btn" href="#"><i class="lnr lnr lnr-diamond"></i></a>--> <!--<a class="icon_btn" href="#"><i class="lnr lnr lnr-heart"></i></a>-->

Answer 1

尝试var i = 0for循环迭代器代替let i = 0。

或者您可以在循环块中设置一个等于i的新变量。

for (let i = 0; i < carts.length; i++) {
let index = i;
}

更多信息请参见此问题。