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

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) 的循环。

事实上，none 个对象在开始时包含 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 更新我的产品（它也更新了数量）。我改了顺序。

现在可以了。

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

Function won't completely initialize until used as a callback function in another function

javascript

jquery

shopping-cart

function

jquery-selectors