在用作另一个函数的回调函数之前，该函数不会完全初始化

Question

我正在使用jQuery和本地存储进行购物车操作，遇到了一个问题。

我创建了一个函数renderCart() ，每次页面重新加载时我都想显示该函数，但是如果我在document.ready函数中对其进行初始化，它将不会执行代码，但是如果我创建一个按钮＃show-cart和我将其传递给我的renderCart()函数，然后单击它，然后将看到渲染的购物车。

您知道为什么我的代码在重新加载页面时不会初始化以及如何使它工作吗？

 'use strict' const products = [{ "id": 0, "name": "Bamboo Tootbrush", "price": 9.99, "description": "This is a description of the item that you are about to buy. It is eco-friendly and buy buying this product you are helping the environment and the planet..", "url": "css/img/item1.jpg", "sale": true, "category": "bathroom" }, { "id": 1, "name": "Bamboo Dental Floss", "price": 10.99, "description": "This is a description of the item that you are about to buy. It is eco-friendly and buy buying this product you are helping the environment and the planet.", "url": "css/img/item2.jpg", "sale": false, "category": "bathroom" }, { "id": 2, "name": "Bamboo Swabs", "price": 8.99, "description": "This is a description of the item that you are about to buy. It is eco-friendly and buy buying this product you are helping the environment and the planet.", "url": "css/img/item3.jpg", "sale": true, "category": "bathroom" }, { "id": 3, "name": "Eco-friendly Straws", "price": 12.99, "description": "This is a description of the item that you are about to buy. It is eco-friendly and buy buying this product you are helping the environment and the planet.", "url": "css/img/item4.jpg", "sale": true, "category": "kitchen" }, { "id": 4, "name": "Set of 3 produce bags", "price": 11.99, "description": "This is a description of the item that you are about to buy. It is eco-friendly and buy buying this product you are helping the environment and the planet.", "url": "css/img/item5.jpg", "sale": false, "category": "kitchen" }, { "id": 5, "name": "MESH produce bags", "price": 11.99, "description": "This is a description of the item that you are about to buy. It is eco-friendly and buy buying this product you are helping the environment and the planet.", "url": "css/img/item6.jpg", "sale": false, "category": "kitchen" }, { "id": 6, "name": "Straws", "price": 11.99, "description": "This is a description of the item that you are about to buy. It is eco-friendly and buy buying this product you are helping the environment and the planet.", "url": "css/img/item7.jpg", "sale": false, "category": "kitchen" }, { "id": 7, "name": "Tootbrush ECOholic", "price": 11.99, "description": "This is a description of the item that you are about to buy. It is eco-friendly and buy buying this product you are helping the environment and the planet.", "url": "css/img/item8.jpg", "sale": false, "category": "bathroom" } ] $(document).ready(function() { //Nacitanie navigacie a footeru na vsetkych strankach $('.menu').load('http://127.0.0.1:5500/ITvKurze-Projekt/menu.html'); $('footer').load('http://127.0.0.1:5500/ITvKurze-Projekt/footer.html'); showFavProduct(); showProduct(); filter(); addToCart(); renderCart(); //this wont render //this below will $('#show-cart').click(function showCart() { renderCart(); }); addCartInfoToCartList(); cartCount(); for (let i = 0; i < products.length; i++) { console.log(products[i]); } $('.clear-btn').click(function clearCartbutton() { clearCart(); }); function addToCart() { $('.add-btn').on("click", function(e) { let productID = e.target.attributes.productid.value let actualCart = localStorage.getItem('productsID'); if (actualCart == null) { actualCart = []; } else { actualCart = JSON.parse(actualCart); } actualCart.push(productID); localStorage.setItem('productsID', JSON.stringify(actualCart)); console.log(`Just added product to cart with ID: ${ productID }`); cartCount(); console.log(JSON.stringify(actualCart)); renderCart(); }); }; function addCartInfoToCartList() { for (let i = 0; i < products.length; i++) { products[i].qty = undefined; } let actualCart = localStorage.getItem('productsID'); if (actualCart === null) { actualCart = []; } else { actualCart = JSON.parse(actualCart); } for (let i = 0; i < actualCart.length; i++) { let productPosition = actualCart[i]; if (products[productPosition].qty === undefined) { products[productPosition].qty = 1; } else { products[productPosition].qty++; } } } function cartCount() { let cartLength; if (!localStorage.getItem('productsID')) { cartLength = []; console.log('Your cart is empty'); $('.cart').text(`(0)`); // !!!!! neviem preco mi nefunguje pri prvom inicializovani riadok vyssie !!!! } else { cartLength = localStorage.getItem('productsID'); let cartCount = JSON.parse(cartLength).length; console.log(`Number of products in cart: ${ cartCount }.`); $('.cart').text(`(${ cartCount })`); } }; function clearCart() { localStorage.clear(); for (let i = 0; i < products.length; i++) { products[i].qty = undefined; } $('.cart-container').empty(); console.log('Your cart is empty'); }; //ZOBRAZENIE PRODUKTOV V CART ELEMENTE function renderCart() { for (let i of products) { if (i.qty !== undefined) { let productDiv = `<div class="fav-wrap ${i.category}">`; productDiv += `<img class="fav" src="${i.url}">`; productDiv += `<div class="name">${ i.name }</div>`; productDiv += `<div>Price: ${ i.price } EUR</div>` productDiv += `<div class="add-btn" productid="${ i.id }">ADD TO CART</div>`; productDiv += '</div>'; $('.cart-container').append(productDiv); }; }; }; //Zobrazenie akciovych produktov na index.html v sekcii Our Favourites function showFavProduct() { for (let i of products) { if (i.sale === true) { let productDiv = `<div class="fav-wrap ${i.category}">`; productDiv += `<img class="fav" src="${i.url}">`; productDiv += `<div class="name">${ i.name }</div>`; productDiv += `<div>Price: ${ i.price } EUR</div>` productDiv += `<div class="add-btn" productid="${ i.id }">ADD TO CART</div>`; productDiv += '</div>'; $('#fav-products').append(productDiv); } } } //Zobrazenie vsetkych produktov na SHOP.html function showProduct() { for (let i of products) { let productDiv = `<div class="fav-wrap ${i.category}">`; productDiv += `<img class="fav" src="${i.url}">`; productDiv += `<div class="name">${ i.name }</div>`; productDiv += `<div>Price: ${ i.price } EUR</div>` productDiv += `<div class="add-btn" productid="${ i.id }">ADD TO CART</div>`; productDiv += '</div>'; $('#all-products').append(productDiv); } } //Vyber kategorie v SHOPE function filter() { $('#all').click(function() { $(".kitchen, .bathroom").show(); $(this).addClass("selected"); $("#cat-kitchen, #cat-bath").removeClass("selected"); }); $('#cat-kitchen').click(function() { $(".bathroom").hide(); $(".kitchen").show(); $("#all, #cat-bath").removeClass("selected"); $(this).addClass("selected"); }); $('#cat-bath').click(function() { $(".kitchen").hide(); $(".bathroom").show(); $("#all, #cat-kitchen").removeClass("selected"); $(this).addClass("selected") }); } }); 

我希望重新加载页面后，我会立即看到存储在本地存储区中的实际购物车，因此不必每次都单击“显示购物车”按钮。

Answer 1

您的代码会运行，您的函数也会执行。

但是它仅包含带有if (i.qty !== undefined)的循环。

实际上，您的对象一开始都不包含qty ，因此循环不会执行任何操作。 它完成了它应该做的事情。

// No "qty" anywhere.
{ 
      "id": 1,
      "name": "Bamboo Dental Floss",
      "price": 10.99,
      "description": "This is a description of the item that you are about to buy. It is eco-friendly and buy buying this product you are helping the environment and the planet.",
      "url": "css/img/item2.jpg",
      "sale": false,
      "category": "bathroom"
} 

Answer 2

我现在明白了。

我的addCartInfoToCartList(); 在我的renderCart（）之后，初始化了从LocalStorage更新我的产品的程序（它也更新了数量）。 我改变了顺序。

现在可以了。