我如何让我的js函数从两个不同的产品列表相同的产品菜单中添加到购物车项目？

问题描述 投票：0回答：1

这是ejs格式的项目列表，我将列表分为两部分，一个列表是零食，另一个列表是饮料列表，当我在零食列表中添加项目时，它们会添加到购物车甚至计算总数，但是当我尝试在饮料清单上添加项目时没有任何反应，我提供了我的 js 函数，用于将项目添加到下面的购物车

 <!--SNACKS LSIT-->
    <div class="banner-snacks">Snacks</div>
        <div class="list">     
    <div class="item">
        <img src="images/1.PNG" alt="Chicken Wings">
        <div class="title">Chicken Wings</div>
        <div class="price">450.00</div>
        <button onclick="addToCart(1)">Add To Cart</button>
    </div>
    <div class="item">
        <img src="images/2.PNG" alt="Dry Fry Fish">
        <div class="title">Dry Fry Fish</div>
        <div class="price">650.00</div>
        <button onclick="addToCart(2)">Add To Cart</button>
    </div>
    <div class="item">
        <img src="images/3.PNG" alt="Fries Masala">
        <div class="title">Fries Masala</div>
        <div class="price">250.00</div>
        <button onclick="addToCart(3)">Add To Cart</button>
    </div>
    <div class="item">
        <img src="images/4.PNG" alt="Fries">
        <div class="title">Fries</div>
        <div class="price">250.00</div>
        <button onclick="addToCart(4)">Add To Cart</button>
    </div>
    <div class="item">
        <img src="images/5.PNG" alt="Pork Pan Fry">
        <div class="title">Pork Pan Fry</div>
        <div class="price">650.00</div>
        <button onclick="addToCart(5)">Add To Cart</button>
    </div>
    <div class="item">
        <img src="images/6.PNG" alt="Kales">
        <div class="title">Kales</div>
        <div class="price">100.00</div>
        <button onclick="addToCart(6)">Add To Cart</button>
    </div>
        </div>
        <!--DRINKS LIST-->
    <div class="banner-drinks">
        <div>
            <div class="banner-drink">Drinks</div>
          </div>
    </div>
      
    <div class="list-drinks">
     <div class="item-drinks">
        <img src="images/7.PNG" alt="Kuku Kienyeji">
        <div class="title">Kuku Kienyeji</div>
        <div class="price">450.00</div>
        <button onclick="addToCart(7)">Add To Cart</button>
    </div>   
    <div class="item-drinks">
        <img src="images/8.PNG" alt="Ugali">
        <div class="title">Ugali</div>
        <div class="price">50.00</div>
        <button onclick="addToCart(8)">Add To Cart</button>
    </div>

这是函数，但它只计算零食列表而不是饮料列表

//menu calculating and adding function.
function addToCart(key) {
    console.log('Key value:', key);

    let item = list.querySelectorAll('.item')[key - 1];
    let name = item.querySelector('.title').textContent;
    let priceText = item.querySelector('.price').textContent;
    let price = parseFloat(priceText.replace(/[^0-9.]/g, ''));
    

    let container;
    if (key < 6) {
        container = listCarts; // Snacks container
    } else {
        container = listCartsDrinks; // Drinks container
    }

    
    if (listCarts[key] == null) {
        // copy product info to list card
        listCarts[key] = {
            name: name,
            basePrice: price,
            price: price,
            quantity: 1,
        };
    } else {
        listCarts[key].quantity++;
        listCarts[key].price = listCarts[key].basePrice * listCarts[key].quantity;
    }

    reloadCart();
}

我已经尝试将函数修改为这样，但仍然不起作用

if (key < 6) {
        item = document.querySelectorAll('.item')[key - 1];
    } else {
        item = document.querySelectorAll('.item-drinks')[key - 7];
    }
javascript html ejs
1个回答
0
投票

在不改变HTML结构的情况下，需要单独创建drinks元素容器，并根据key值分配

item
，并且在选择
item
时将key减少零食的长度。

试试这个：

const list = document.querySelector('.list');
const listDrinks = document.querySelector('.list-drinks');

const listCarts = [];
const listCartsDrinks = [];

//menu calculating and adding function.
function addToCart(key) {

  let item;
  let container;

  if (key <= 6) {

    item = list.querySelectorAll('.item')[key - 1];
    container = listCarts; // Snacks container

  } else {

    item = listDrinks.querySelectorAll('.item-drinks')[(key - 6) - 1];
    container = listCartsDrinks; // Drinks container
  }


  let name = item.querySelector('.title').textContent;
  let priceText = item.querySelector('.price').textContent;
  let price = parseFloat(priceText.replace(/[^0-9.]/g, ''));


  if (container[key] == null) {
    // copy product info to list card
    container[key] = {
      name: name,
      basePrice: price,
      price: price,
      quantity: 1,
    };
  } else {
    container[key].quantity++;
    container[key].price = container[key].basePrice * container[key].quantity;
  }

  console.log('snacks', listCarts, '\ndrinks', listCartsDrinks);
  reloadCart();
}

function reloadCart() {
  console.log('reloadCart');
}
.as-console-wrapper {
  max-height: 20% !important;
  bottom: 0;
}
<!--SNACKS LSIT-->
<div class="banner-snacks">Snacks</div>
<div class="list">
  <div class="item">
    <img src="images/1.PNG" alt="Chicken Wings">
    <div class="title">Chicken Wings</div>
    <div class="price">450.00</div>
    <button onclick="addToCart(1)">Add To Cart</button>
  </div>
  <div class="item">
    <img src="images/2.PNG" alt="Dry Fry Fish">
    <div class="title">Dry Fry Fish</div>
    <div class="price">650.00</div>
    <button onclick="addToCart(2)">Add To Cart</button>
  </div>
  <div class="item">
    <img src="images/3.PNG" alt="Fries Masala">
    <div class="title">Fries Masala</div>
    <div class="price">250.00</div>
    <button onclick="addToCart(3)">Add To Cart</button>
  </div>
  <div class="item">
    <img src="images/4.PNG" alt="Fries">
    <div class="title">Fries</div>
    <div class="price">250.00</div>
    <button onclick="addToCart(4)">Add To Cart</button>
  </div>
  <div class="item">
    <img src="images/5.PNG" alt="Pork Pan Fry">
    <div class="title">Pork Pan Fry</div>
    <div class="price">650.00</div>
    <button onclick="addToCart(5)">Add To Cart</button>
  </div>
  <div class="item">
    <img src="images/6.PNG" alt="Kales">
    <div class="title">Kales</div>
    <div class="price">100.00</div>
    <button onclick="addToCart(6)">Add To Cart</button>
  </div>
</div>
<!--DRINKS LIST-->
<div class="banner-drinks">
  <div>
    <div class="banner-drink">Drinks</div>
  </div>
</div>
<div class="list-drinks">
  <div class="item-drinks">
    <img src="images/7.PNG" alt="Kuku Kienyeji">
    <div class="title">Kuku Kienyeji</div>
    <div class="price">450.00</div>
    <button onclick="addToCart(7)">Add To Cart</button>
  </div>
  <div class="item-drinks">
    <img src="images/8.PNG" alt="Ugali">
    <div class="title">Ugali</div>
    <div class="price">50.00</div>
    <button onclick="addToCart(8)">Add To Cart</button>
  </div>
</div>
</body>

但这不切实际，因此代码可以改进。

因此，我将 

cart-item
类添加到每个项目，并通过当前类区分它们，并使用事件侦听器而不是 
onclick
，并将它们分配给每个按钮，并且每个按钮动态地有一个 ID，这将传递给单击侦听器，然后在单击侦听器中将按钮的父项指定为项目，并使用对象而不是数组，以避开空数组元素，并仍然保留元素的索引：

// get all items
const list = document.querySelectorAll('.cart-item');

// add click listener
// also attach item index 1-8
document.querySelectorAll('.cart-item button').forEach((btn, i) => {
  btn.id = ++i;
  btn.addEventListener('click', addToCart);
});

// containers
const listCarts = {};
const listCartsDrinks = {};

//menu calculating and adding function.
function addToCart(e) {

  // item is button container with all the data
  const item = e.target.parentElement;
  // get its index 1-8
  const key = e.currentTarget.id;

  let container;

  // determin is it snack or drink by its' class
  if (item.classList.contains('item')) {

    container = listCarts; // Snacks container

  } else {

    container = listCartsDrinks; // Drinks container
  }


  let name = item.querySelector('.title').textContent;
  let priceText = item.querySelector('.price').textContent;
  let price = parseFloat(priceText.replace(/[^0-9.]/g, ''));


  if (container[key] == null) {
    // copy product info to list card
    container[key] = {
      name: name,
      basePrice: price,
      price: price,
      quantity: 1,
    };
  } else {
    container[key].quantity++;
    container[key].price = container[key].basePrice * container[key].quantity;
  }

  console.log('snacks', listCarts, '\ndrinks', listCartsDrinks);
  reloadCart();
}

function reloadCart() {
  console.log('reloadCart');
}
.as-console-wrapper {
  max-height: 20% !important;
  bottom: 0;
}
<!--SNACKS LSIT-->
<div class="banner-snacks">Snacks</div>
<div class="list">
  <div class="cart-item item">
    <img src="images/1.PNG" alt="Chicken Wings">
    <div class="title">Chicken Wings</div>
    <div class="price">450.00</div>
    <button>Add To Cart</button>
  </div>
  <div class="cart-item item">
    <img src="images/2.PNG" alt="Dry Fry Fish">
    <div class="title">Dry Fry Fish</div>
    <div class="price">650.00</div>
    <button>Add To Cart</button>
  </div>
  <div class="cart-item item">
    <img src="images/3.PNG" alt="Fries Masala">
    <div class="title">Fries Masala</div>
    <div class="price">250.00</div>
    <button>Add To Cart</button>
  </div>
  <div class="cart-item item">
    <img src="images/4.PNG" alt="Fries">
    <div class="title">Fries</div>
    <div class="price">250.00</div>
    <button>Add To Cart</button>
  </div>
  <div class="cart-item item">
    <img src="images/5.PNG" alt="Pork Pan Fry">
    <div class="title">Pork Pan Fry</div>
    <div class="price">650.00</div>
    <button>Add To Cart</button>
  </div>
  <div class="cart-item item">
    <img src="images/6.PNG" alt="Kales">
    <div class="title">Kales</div>
    <div class="price">100.00</div>
    <button>Add To Cart</button>
  </div>
</div>
<!--DRINKS LIST-->
<div class="banner-drinks">
  <div>
    <div class="banner-drink">Drinks</div>
  </div>
</div>
<div class="list-drinks">
  <div class="cart-item item-drinks">
    <img src="images/7.PNG" alt="Kuku Kienyeji">
    <div class="title">Kuku Kienyeji</div>
    <div class="price">450.00</div>
    <button>Add To Cart</button>
  </div>
  <div class="cart-item item-drinks">
    <img src="images/8.PNG" alt="Ugali">
    <div class="title">Ugali</div>
    <div class="price">50.00</div>
    <button>Add To Cart</button>
  </div>
</div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.