单击时，将一个项目从一个数组推送到另一个，并根据数组中的项目更改文本
[英]On click, push one item from an an array to another, and change text dependent on items in array
问题描述
我正在尝试设置它，以便如果我单击具有“addtocart”类的按钮，它将检查 HTML 文档中按钮的 id 并遍历产品数组对象，直到找到具有相同 Id 的对象元素上的按钮，然后将其推送到购物车数组。 然后我需要更改“cartamnt”跨度的内部文本，以便根据添加到购物车的商品数量，文本“0 购物车”变为“1 购物车”等。
//Arrays var products = [{ Price: 20, Name: "Football Helmet", Description: "Titans football helmet", Id: "Titan_a" }, { Price: 15, Name: "Light Blue Shirt", Description: "Titans light blue shirt", Id: "Titan_b" }, { Price: 15, Name: "White Shirt", Description: "Titans white shirt", Id: "Titan_c" }, { Price: 15, Name: "Blue Shirt", Description: "Titans blue shirt", Id: "Titan_d" }, { Price: 25, Name: "Hockey Stick", Description: "Titans hockey stick", Id: "Titan_d" } ]; var cart = []; //All the button variables var addtocart = document.getElementsByClassName("add"); var camount = document.getElementById("cartamnt"); cartamnt.innerText = "0 cart" addtocart.onclick = function(products, cart) { for (var i = 0; i < products.length; i++) { if (addtocart.Id == products.Id) { cart.push(products.Id[i]) cartamnt.innerText = i++ + "cart" } } }
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="css/styles.css"> </head> <body> <h1 id="main_title">Titan Sports and Apparel LLC</h1> <div class="main"> <div class="row"> <span href="checkout.html" id="cartamnt">0 cart</span> <br /> </div> <div class="row"> <div class="column"> <h1>Football helmet</h1> <img id="img" src="img/Helmet_A.jpg"> <p>Price: $20</p> <p>Official Titan Sportswear Helmet</p> <button class="add" id="Titan_a">Add to cart</button> <button id="Remove_a">Remove from cart</button> </div> <div class="column"> <h1>Light Blue Shirt</h1> <img id="img" src="img/Shirt_A.jpg"> <p>Price: $15</p> <p>Light blue cotton material Titans shirt</p> <button class="add" id="Titan_b">Add to cart</button> <button id="Remove_b">Remove from cart</button> </div> <div class="column"> <h1>White Shirt</h1> <img id="img" src="img/Shirt_B.jpg"> <p>Price: $15</p> <p>White cotton material Titans shirt</p> <button class="add" id="Titan_c">Add to cart</button> <button id="Remove_c">Remove from cart</button> </div> <div class="column"> <h1>Blue Shirt</h1> <img id="img" src="img/Shirt_C.jpg"> <p>Price: $15</p> <p>Blue cotton material Titans shirt</p> <button class="add" id="Titan_d">Add to cart</button> <button id="Remove_d">Remove from cart</button> </div> <div class="column"> <h1>Hockey Stick</h1> <img id="img" src="img/Stick_A.png"> <p>Price: $25</p> <p>Black Titans hockey stick</p> <button class="add" id="Titan_e">Add to cart</button> <button id="Remove_e">Remove from cart</button> </div> </div> </div> <a href="index.html">Homepage</a> <footer>© Titan Sports and Apparel LLC | Email: TitanSportsApparel@gmail.com</footer> <script src="js/shoppingCart.js"></script> </body> </html>
3 个解决方案
解决方案1
1 已采纳 2021-11-15 15:48:53
你的代码有点乱。 我对它进行了一些清理以帮助您入门，但我真的建议您将其发布到Code Review以了解如何改进它。
首先要注意的事情是，你正在使用的id的“添加”按钮来存储产品的ID。 这是一个问题，原因有两个：
-
id属性的目的是给元素一个唯一的标识符，而不是存储数据。 - 您还有一个“移除”按钮，用于将产品从购物车中移除。 使用您的方法，它将具有与“添加”按钮相同的
id，这是不正确的，因为id应该是唯一的。 另一种方法是给它一个不同的 id，并以某种方式在 JS 中从中提取产品 id，这真的很复杂。
这就是为什么我们将使用数据属性而不是id来存储产品 id。 例如：
<button class="add" data-product="Titan_a">Add to cart</button>
<button class="remove" data-product="Titan_a">Remove from cart</button>
现在，您的 JS 的问题在于您的addtocart变量实际上是所有按钮的数组，而不是单个按钮，因此您不能只将onclick事件附加到它。 您需要遍历所有按钮并单独将onclick事件附加到它们。
所以我们会得到这样的东西：
const addButtons = document.getElementsByClassName("add");
const removeButtons = document.getElementsByClassName("remove");
for (const addButton of addButtons) {
addButton.addEventListener("click", () => {
...
});
}
for (const removeButton of removeButtons) {
removeButton.addEventListener("click", () => {
...
});
}
现在很容易实现添加和删除。 你不需要手动循环抛出你的数组，你可以简单地使用find函数和其他一些有用的“内置”数组函数。
这是一个完整的工作示例：
let products = [{ Price: 20, Name: "Football Helmet", Description: "Titans football helmet", Id: "Titan_a" }, { Price: 15, Name: "Light Blue Shirt", Description: "Titans light blue shirt", Id: "Titan_b" }, { Price: 15, Name: "White Shirt", Description: "Titans white shirt", Id: "Titan_c" }, { Price: 15, Name: "Blue Shirt", Description: "Titans blue shirt", Id: "Titan_d" }, { Price: 25, Name: "Hockey Stick", Description: "Titans hockey stick", Id: "Titan_e" } ]; let cart = []; const addButtons = document.getElementsByClassName("add"); const removeButtons = document.getElementsByClassName("remove"); const amountLabel = document.getElementById("cartamnt"); for (const addButton of addButtons) { addButton.addEventListener("click", () => { let product = products.find(p => p.Id == addButton.dataset.product); cart.push(product); amountLabel.innerText = cart.length + "items"; }); } for (const removeButton of removeButtons) { removeButton.addEventListener("click", () => { const index = cart.findIndex(p => p.Id === removeButton.dataset.product); // index of product to remove cart.splice(index, 1); // removing it amountLabel.innerText = cart.length + "items"; }); }
<!DOCTYPE html> <html> <body> <h1 id="main_title">Titan Sports and Apparel LLC</h1> <div class="main"> <div class="row"> <span href="checkout.html" id="cartamnt">0 cart</span> <br /> </div> <div class="row"> <div class="column"> <h1>Football helmet</h1> <img id="img" src="img/Helmet_A.jpg"> <p>Price: $20</p> <p>Official Titan Sportswear Helmet</p> <button class="add" data-product="Titan_a">Add to cart</button> <button class="remove" data-product="Titan_a">Remove from cart</button> </div> <div class="column"> <h1>Light Blue Shirt</h1> <img id="img" src="img/Shirt_A.jpg"> <p>Price: $15</p> <p>Light blue cotton material Titans shirt</p> <button class="add" data-product="Titan_b">Add to cart</button> <button class="remove" data-product="Titan_b">Remove from cart</button> </div> <div class="column"> <h1>White Shirt</h1> <img id="img" src="img/Shirt_B.jpg"> <p>Price: $15</p> <p>White cotton material Titans shirt</p> <button class="add" data-product="Titan_c">Add to cart</button> <button class="remove" data-product="Titan_c">Remove from cart</button> </div> <div class="column"> <h1>Blue Shirt</h1> <img id="img" src="img/Shirt_C.jpg"> <p>Price: $15</p> <p>Blue cotton material Titans shirt</p> <button class="add" data-product="Titan_d">Add to cart</button> <button class="remove" data-product="Titan_d">Remove from cart</button> </div> <div class="column"> <h1>Hockey Stick</h1> <img id="img" src="img/Stick_A.png"> <p>Price: $25</p> <p>Black Titans hockey stick</p> <button class="add" data-product="Titan_e">Add to cart</button> <button class="remove" data-product="Titan_e">Remove from cart</button> </div> </div> </div> <a href="index.html">Homepage</a> <footer>© Titan Sports and Apparel LLC | Email: TitanSportsApparel@gmail.com</footer> </body> </html>
解决方案2
0 2021-11-15 15:36:25
这是快速而肮脏的，但它应该可以完成您的工作：
请注意，我在“从购物车中删除”按钮上添加了一个“删除”类，并将相同的 id 作为 id 属性放置（因为我们需要在产品数组中通过它们进行搜索）。 这应该有效，作为奖励，当您在购物车中有多个相同的产品但只想删除一个时，我添加了一个 if 案例。
我还以不同的方式附加了事件侦听器。
const addProductToCard = (e) => {
const productToAdd = products.find(i => i.Id === e.target.id);
cart.push(productToAdd);
}
const removeFromCard = (e) => {
const identical = cart.filter(i => i.Id === e.target.id);
if (identical.length === 1) {
cart = cart.filter(i => i.Id !== e.target.id);
} else {
cart = [...identical.splice(1), ...cart.filter(i => i.Id !== e.target.id)];
}
}
document.querySelectorAll('.add').forEach(i => i.addEventListener("click", addProductToCard));
document.querySelectorAll('.remove').forEach(i => i.addEventListener("click", removeFromCard));
解决方案3
0 2021-11-15 15:42:25
您只需要遍历数组，然后添加event listener ：
addtocart.forEach(btn => {
btn.addEventListener("click", (e) => {
const Id = e.target.id;
const product = products.find(o => o.Id === Id);
product && cart.push({ ...product });
cartamnt.innerText = cart.length + " cart";
})
})
var products = [{ Price: 20, Name: "Football Helmet", Description: "Titans football helmet", Id: "Titan_a" }, { Price: 15, Name: "Light Blue Shirt", Description: "Titans light blue shirt", Id: "Titan_b" }, { Price: 15, Name: "White Shirt", Description: "Titans white shirt", Id: "Titan_c" }, { Price: 15, Name: "Blue Shirt", Description: "Titans blue shirt", Id: "Titan_d" }, { Price: 25, Name: "Hockey Stick", Description: "Titans hockey stick", Id: "Titan_d" } ]; var cart = []; //All the button variables var addtocart = [...document.getElementsByClassName("add")]; var camount = document.getElementById("cartamnt"); cartamnt.innerText = "0 cart" addtocart.forEach(btn => { btn.addEventListener("click", (e) => { const Id = e.target.id; const product = products.find(o => o.Id === Id); product && cart.push({ ...product }); cartamnt.innerText = cart.length + " cart"; }) })
<h1 id="main_title">Titan Sports and Apparel LLC</h1> <div class="main"> <div class="row"> <span href="checkout.html" id="cartamnt">0 cart</span> <br /> </div> <div class="row"> <div class="column"> <h1>Football helmet</h1> <img id="img" src="img/Helmet_A.jpg"> <p>Price: $20</p> <p>Official Titan Sportswear Helmet</p> <button class="add" id="Titan_a">Add to cart</button> <button id="Remove_a">Remove from cart</button> </div> <div class="column"> <h1>Light Blue Shirt</h1> <img id="img" src="img/Shirt_A.jpg"> <p>Price: $15</p> <p>Light blue cotton material Titans shirt</p> <button class="add" id="Titan_b">Add to cart</button> <button id="Remove_b">Remove from cart</button> </div> <div class="column"> <h1>White Shirt</h1> <img id="img" src="img/Shirt_B.jpg"> <p>Price: $15</p> <p>White cotton material Titans shirt</p> <button class="add" id="Titan_c">Add to cart</button> <button id="Remove_c">Remove from cart</button> </div> <div class="column"> <h1>Blue Shirt</h1> <img id="img" src="img/Shirt_C.jpg"> <p>Price: $15</p> <p>Blue cotton material Titans shirt</p> <button class="add" id="Titan_d">Add to cart</button> <button id="Remove_d">Remove from cart</button> </div> <div class="column"> <h1>Hockey Stick</h1> <img id="img" src="img/Stick_A.png"> <p>Price: $25</p> <p>Black Titans hockey stick</p> <button class="add" id="Titan_e">Add to cart</button> <button id="Remove_e">Remove from cart</button> </div> </div> </div> <a href="index.html">Homepage</a> <footer>© Titan Sports and Apparel LLC | Email: TitanSportsApparel@gmail.com</footer>
给出一个索引数组，如何根据指定的索引将项目从一个数组推送到另一个数组？
[英]Giving an array of indexes, how to push items from one array to another depending on the indexes that are specified?
如何使用 ramda 表达式将项目从一个数组推送到另一个数组？
[英]How to push items from an array to another array using ramda expressions?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.