很抱歉我的代码片段很难看，但我认为它可以向您展示我的代码。我已经连续三天在尝试新的东西来修复它了，但我真的做不到。使用普通的香草js，有没有可能给我一个提示，告诉我如何只显示与产品id匹配的产品？例如，如果是1，则只显示牛奶。如果是2，只显示可可牛奶。如果是3，只显示杏仁奶。我无法进行筛选。我还尝试更改foreach循环中的html变量。。例如，我之所以不要求jquery，是因为我做这个练习是为了学习。所以jquery可以解决这个问题，但我还没有学会。
我在控制台中正确地获取了项目。因此，例如，如果我console.log类别为1，则项目将正确显示在那里。但当它使用html时，无论发生什么，每个项目都会显示。。。。有人能帮忙吗？我完全迷路了
const product1 = {
p_image: "https://3z6mv8219w2s2w196j1dkzga-wpengine.netdna-ssl.com/wp-content/uploads/2020/01/turtletree-labs.jpg",
p_title: "Milk",
p_price: 145,
id: 1,
};
const product2 = {
p_image: "https://chriskresser.com/wp-content/uploads/raw-milk-1-e1563894986431.jpg",
p_title: "Milk2",
p_price: 512,
id: 1,
};
const product3 = {
p_image: "https://i2.wp.com/www.eatthis.com/wp-content/uploads/media/images/ext/621263600/chocolate-milk-straw.jpg?fit=1024%2C750&ssl=1",
p_title: "Cocoa milk",
p_price: 111,
id: 2,
};
const product4 = {
p_image: "https://silk.com/wp-content/uploads/2019/02/silk-original-almondmilk-4.png",
p_title: "Almond milk",
p_price: 133,
id: 3,
};
const products = [
product1,
product2,
product3,
product4
]
const containerProducts = document.querySelector(".product-center-container");
const displayProducts = function() {
containerProducts.innerHTML = "";
products.forEach((element) => {
const html = `
<div class="product-center-container">
<div class="product" id=${element.id}>
<a href="pDescription.html"><img class ="p_image" src="${element.p_image}"></a>
<h1 class="p_title">${element.p_title}</h1>
<h4 class="p_price">${element.p_price}.-</h4>
<button class="itemsToCart"><img src="images/cartAdd.png" alt="Basket displayed here"></button>
</div>
</div>
`;
containerProducts.insertAdjacentHTML("afterbegin", html);
});
};
// displayProducts();
const filterProducts = function(productId) {
products.forEach(product => {
if (product.id === productId ){
displayProducts();
console.log(product);
}
});
}
filterProducts(3);
// const filterProducts = function(productId) {
// let newArr = [];
// products.forEach(product => {
// if (product.id === productId) {
// newArr.push(product);
// / }
// });
// displayProducts(newArr);
// console.log(newArr);
// }
// filterProducts(3);.p_image{width: 150px;)<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="product-center-container">
<div class="product">
<a href="pDescription.html"><img class="p_image" src=""></a>
<h1 class="p_title">Title</h1>
<h4 class="p_price">Price</h4>
<button class="itemsToCart"><img src="images/cartAdd.png" alt="Basket displayed here"></button>
</div>
</div>
</div>
</body>
</html>让我开始计算。所以第一件事是你需要正确地过滤掉产品，而forEach并不是这样工作的。
您需要使用find。
我不会为你提供一个完整的例子，只是为了学习的目的。这是伪代码：
const filteredProduct = products.find(x => x.id === specificId)
上面的代码将返回一个与特定ID匹配的特定对象。
现在，您可以在任何您想要的地方使用该对象。您可以创建一个函数，返回具有特定ID的对象，并在代码中调用该函数。
并且您不需要执行products.forEach来显示单个过滤对象。请记住，find将为您返回一个对象，因为您将对象存储在数组中。
这允许您调用displayProduct(filteredProduct)
您已经提到要显示与id匹配的产品。id是一个唯一的标识符，您不希望元素具有相同的id，因此find将只返回一个元素。
如果要返回多个符合特定条件的元素，可以使用更高阶函数filter。
const filteredProducts = products.filter(x => x.name === name)
这将返回一个与给定条件匹配的数组，即name。
现在我们可以调用一个函数displayProducts(filteredProducts)。
现在，您必须迭代过滤后的产品并显示它们！
const displayProducts = (filteredProducts) => { filteredProducts.map(x => { return //return html element here
我们更喜欢使用map，例如，如果您想返回某种新数组或某种html元素，我们不使用forEach。
我知道解决问题并为您编写准确的代码会对您有更多帮助，但您不会觉得这对自己有用。
希望这能有所帮助！如果你需要任何帮助，请在评论中告诉我。
PS。如果可能的话，我建议你开始使用JS框架，这会让你的生活更轻松。一旦深入研究JS框架，您将更加专注于学习Javascript，因为框架使一切都变得更容易。