英文:
How to filter and inserted element in html with JavaScript
问题
Here is the code you provided with the translation:
// 这是我的JavaScript代码
let filt_mas = document.getElementById("filt_mas");
let filt_fem = document.getElementById("filt_fem");
let filt_inf = document.getElementById("filt_inf");
function addItem(prods) {
const mainProds = document.getElementById("main__prods");
prods.gen.forEach(prod => {
mainProds.insertAdjacentHTML("beforeend",
`
<!-- 产品 -->
<div class="col" style="margin-bottom: 1rem;">
<div class="card card__team h-100">
<div style="text-align: center;">
<img src="${prod.image}"
style="width: 150px; height: 150px; margin-top: 1rem;"
class="img-fluid rounded" alt="${prod.title}">
</div>
<div class="card-body">
<div class="title__card">
<span>${prod.title.slice(0, 30)}</span>
</div>
<div class="subtitle__card">
<span>${prod.Origen}</span>
</div>
<p class="card-text" style="text-align: justify;">${prod.description} ... </p>
</div>
<div style="text-align:right; margin-top:0;">
<button type="button" class="btn btn-warning btn-producto" data-bs-toggle="modal" data-bs-target="#exampleModal${prod.id}">
查看更多
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="currentColor" class="bi bi-caret-down-fill" viewBox="0 0 16 16">
<path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/>
</svg>
</button>
</div>
<div class="modal fade" id="exampleModal${prod.id}" tabindex="-1" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title"><strong>${prod.title}</strong></h6>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="container-fluid text-center" id="singleprod">
<div class="row" style="width: 100%;">
<div class="col" style="width: 15%;">
<ul class="list-group">
<li class="list-group-item"><img src="${prod.image}" class="rounded mx-auto d-block"
alt="..." style="width: 75px; height: 150px;"></li>
<li class="list-group-item"><img src="${prod.image2}" class="rounded mx-auto d-block"
alt="..." style="width: 75px; height: 150px;"></li>
<li class="list-group-item"><img src="${prod.image3}" class="rounded mx-auto d-block"
alt="..." style="width: 75px; height: 150px;"></li>
</ul>
</div>
<div class="col" style="width: 50%;">
<img src="${prod.image}" class="rounded mx-auto d-block" alt="..."
style="width: 300px; height: 450px;">
</div>
<div class="col" style="width: 35%;">
<!-- 产品名称 -->
<h5 id="nombre_producto">价格: $ ${prod.price}</h5>
<div class="container text-center">
<div class="row">
<div class="col">
<p class="codigo">编码:</p>
</div>
<div class="col">
<p class="codigo">${prod.id}</p>
</div>
</div>
</div>
<!-- 尺码 -->
<div class="container text-center">
<div class="row">
<div class="col">
<p class="codigo">尺码</p>
</div>
<div class="col">
<div class="dropdown">
<button class="btn dropdown-toggle" type="button"
data-bs-toggle="dropdown" aria-expanded="false">
选择一个尺码
</button>
<ul class="dropdown-menu" id="menutallas">
<li>小号</li>
<li>中号</li>
<li>大号</li>
<li>特大号</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 颜色 -->
<p class="codigo">颜色</p>
<div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1"
value="option1">
<label class="form-check-label" for="inlineCheckbox1"><div class="col-1 red"></div></label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2"
value="option2">
<label class="form-check-label" for="inlineCheckbox2"><div class="col-1 green"></div></label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2"
value="option2">
<label class="form-check-label" for="inlineCheckbox2"> <div class="col-1"
style="background-color: blue; width: 10px; height: 10px;"></div></label>
</div>
</div>
<!-- 描述 -->
<div class="descripciones-modal">
<p>描述</p>
<ul>
<li>${prod.Desc1}</li>
<li>${prod.Desc2}</li>
<li>${prod.Desc3}</li>
<li>${prod.Origen}</li>
<p>${prod.description}</p>
</ul>
</div>
<!-- 按钮 -->
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btnmodal btn-secondary">购买</button>
<button type="button" class="btn btnmodal btn-secondary">购物车</button>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="
<details>
<summary>英文:</summary>
I have a general clothing catalog made in js and I insert it to my html with insertadjacenthtml with an id but I want to filter it when a button is pressed.
If I press the button "hombre"= I want to show only the elements of my array with the attribute Gen:"more".
If I press the "mujer"= button I want to show only the elements of my array with the Gen:"fem" attribute.
If I press the button "infantes"= I want to show only the elements of my array with the attribute Gen:"inf".
how can i do it
This is my js
let filt_mas = document.getElementById("filt_mas");
let filt_fem = document.getElementById("filt_fem");
let filt_inf = document.getElementById("filt_inf");
function addItem(prods) {
const mainProds = document.getElementById("main__prods");
prods.gen.forEach(prod => {
mainProds.insertAdjacentHTML("beforeend",
`
<!-- productos-->
<div class="col" style="margin-bottom: 1rem;">
<div class="card card__team h-100">
<div style="text-align: center;">
<img src="${prod.image}"
style="width: 150px; height: 150px; margin-top: 1rem;"
class="img-fluid rounded" alt="${prod.title}">
</div>
<div class="card-body">
<div class="title__card">
<span>${prod.title.slice(0, 30)}</span>
</div>
<div class="subtitle__card">
<span>${prod.Origen}</span>
</div>
<p class="card-text" style="text-align: justify;">${prod.description} ... </p>
</div>
<div style="text-align:right; margin-top:0;">
<button type="button" class="btn btn-warning btn-producto" data-bs-toggle="modal" data-bs-target="#exampleModal${prod.id}">
Ver más
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="currentColor" class="bi bi-caret-down-fill" viewBox="0 0 16 16">
<path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/>
</svg>
</button>
</div>
<div class="modal fade" id="exampleModal${prod.id}" tabindex="-1" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title"><strong>${prod.title}</strong> </h6>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="container-fluid text-center" id="singleprod">
<div class="row" style="width: 100%;">
<div class="col" style="width: 15%;">
<ul class="list-group">
<li class="list-group-item"><img src="${prod.image}" class="rounded mx-auto d-block" alt="..." style="width: 75px; height: 150px;"></li>
<li class="list-group-item"><img src="${prod.image2}" class="rounded mx-auto d-block" alt="..." style="width: 75px; height: 150px;"></li>
<li class="list-group-item"><img src="${prod.image3}" class="rounded mx-auto d-block" alt="..." style="width: 75px; height: 150px;"></li>
</ul>
</div>
<div class="col" style="width: 50%;">
<img src="${prod.image}" class="rounded mx-auto d-block" alt="..." style="width: 300px; height: 450px;">
</div>
<div class="col" style="width: 35%;">
<!--Nombre del producto-->
<h5 id="nombre_producto">Precio: $ ${prod.price}</h5>
<div class="container text-center">
<div class="row">
<div class="col">
<p class="codigo">Codigo:</p>
</div>
<div class="col">
<p class="codigo">${prod.id}</p>
</div>
</div>
</div>
<!--Talla-->
<div class="container text-center">
<div class="row">
<div class="col">
<p class="codigo">Talla</p>
</div>
<div class="col">
<div class="dropdown">
<button class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Elige una talla
</button>
<ul class="dropdown-menu" id="menutallas">
<li>Chica</li>
<li>Mediana</li>
<li>Grande</li>
<li>Extra Grande</li>
</ul>
</div>
</div>
</div>
</div>
<!--Color-->
<p class="codigo">Color</p>
<div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
<label class="form-check-label" for="inlineCheckbox1"><div class="col-1 red"></div></label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
<label class="form-check-label" for="inlineCheckbox2"><div class="col-1 green"></div></label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
<label class="form-check-label" for="inlineCheckbox2"> <div class="col-1" style="background-color: blue;
width: 10px;
height: 10px;"></div></label>
</div>
</div>
<!--Descripcion-->
<div class="descripciones-modal">
<p>Descripción</p>
<ul>
<li>${prod.Desc1}</li>
<li>${prod.Desc2}</li>
<li>${prod.Desc3}</li>
<li>${prod.Origen}</li>
<p>${prod.description}</p>
</ul>
</div>
<!--Botones-->
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btnmodal btn-secondary">Comprar</button>
<button type="button" class="btn btnmodal btn-secondary">Carrito</button>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btnmodal btn-secondary"
data-bs-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
</div>
</div>
`
);
});
}
filt_mas.addEventListener("click", function(event){
});
filt_fem.addEventListener("click", function(event){
prod.some((prod) =>{
return prod.gen == "fem"
})
});
filt_inf.addEventListener("click", function(event){
prod.some((prod) =>{
return prod.gen == "inf"
})
});
prod1 = [
{ id: 1, title: "Camisa Yucateca manga corta", price: 500, description: "Preciosa camisa blanca yucateca bordada a mano!", Origen: "Otomi", image: "./src/img/ropa-kotomitl/camisa1-blanca.jpg", image2: "./src/img/ropa-kotomitl/camisa1-azul.jpg", image3: "./src/img/ropa-kotomitl/camisa1-negra.jpg",Desc1:"100% de lino",Desc2:"Fabricada a mano",Desc3:"Fabricada en taller familiar",gen:"mas",rating: { "rate": 4.9, "count": 500 } },
{ id: 2, title: "Camisa Yucateca manga larga", price: 500, description: "Preciosa camisa blanca yucateca bordada a mano!", Origen: "Otomi", image: "./src/img/ropa-kotomitl/camisa2-blanca.jpg", image2: "./src/img/ropa-kotomitl/camisa2-azul.jpg", image3: "./src/img/ropa-kotomitl/camisa2-negra.jpg",Desc1:"100% de lino",Desc2:"Fabricada a mano",Desc3:"Fabricada en taller familiar",gen:"mas",rating: { "rate": 4.9, "count": 500 } },
{ id: 3, title: "Poncho mexicano", price: 500, description: "Preciosa camisa blanca yucateca bordada a mano!", Origen: "Otomi", image: "./src/img/ropa-kotomitl/poncho2-blanco.jpg", image2: "./src/img/ropa-kotomitl/poncho1-azul.jpg", image3: "./src/img/ropa-kotomitl/poncho1-negro.jpg",Desc1:"100% de lino",Desc2:"Fabricada a mano",Desc3:"Fabricada en taller familiar",gen:"mas",rating: { "rate": 4.9, "count": 500 } },
{ id: 4, title: "Short artesanal", price: 500, description: "Preciosa camisa blanca yucateca bordada a mano!", Origen: "Otomi", image: "./src/img/ropa-kotomitl/short1-blanca.jpg", image2: "./src/img/ropa-kotomitl/short1-azul.jpg", image3: "./src/img/ropa-kotomitl/short1-negra.jpg",Desc1:"100% de lino",Desc2:"Fabricada a mano",Desc3:"Fabricada en taller familiar",gen:"mas",rating: { "rate": 4.9, "count": 500 } },
{ id: 5, title: "Traje de baño artesanal", price: 500, description: "Preciosa camisa blanca yucateca bordada a mano!", Origen: "Otomi", image: "./src/img/ropa-kotomitl/short2-blanca.jpg", image2: "./src/img/ropa-kotomitl/short2-azul.jpg", image3: "./src/img/ropa-kotomitl/short2-negra.jpg",Desc1:"100% de lino",Desc2:"Fabricada a mano",Desc3:"Fabricada en taller familiar",gen:"mas",rating: { "rate": 4.9, "count": 500 } },
{ id: 6, title: "Zapato de piel", price: 500, description: "Preciosa camisa blanca yucateca bordada a mano!", Origen: "Otomi", image: "./src/img/ropa-kotomitl/zapato1-blanca.jpg", image2: "./src/img/ropa-kotomitl/zapato1-azul.jpg", image3: "./src/img/ropa-kotomitl/zapato1-negro.jpg",Desc1:"100% de lino",Desc2:"Fabricada a mano",Desc3:"Fabricada en taller familiar",gen:"mas",rating: { "rate": 4.9, "count": 500 } },
{ id: 7, title: "Camisa Yucateca", price: 500, description: "Preciosa camisa blanca yucateca bordada a mano!", Origen: "Otomi", image: "./src/img/ropa-kotomitl/pantalon1-blanca.jpg", image2: "./src/img/ropa-kotomitl/pantalon2-azul.jpg", image3: "./src/img/ropa-kotomitl/pantalon2-negra.jpg",Desc1:"100% de lino",Desc2:"Fabricada a mano",Desc3:"Fabricada en taller familiar",gen:"fem",rating: { "rate": 4.9, "count": 500 } },
{ id: 8, title: "Sandalias de piel", price: 500, description: "Preciosa camisa blanca yucateca bordada a mano!", Origen: "Otomi", image: "./src/img/ropa-kotomitl/sandalias1-blanco.jpg", image2: "./src/img/ropa-kotomitl/sandalias1-azul.jpg", image3: "./src/img/ropa-kotomitl/sandalias1-negro.jpg",Desc1:"100% de lino",Desc2:"Fabricada a mano",Desc3:"Fabricada en taller familiar",gen:"inf",rating: { "rate": 4.9, "count": 500 } }
];
addItem(prod1);
my HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Productos</title>
<!-- iconos bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<!-- css bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<!-- fonts google-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Georama:wght@400;600&display=swap" rel="stylesheet">
<!-- css interno -->
<link rel="stylesheet" href="./css/main.css">
</head>
<body>
<!-- ================= NAVBAR ============== -->
<header id="navbar"></header>
<!-- ================= CONTENIDO ============== -->
<main class="container mb-5">
<!-- <section class="container"> -->
<div class="container-fluid text-center container-products">
<div class="row">
<div class="col-md-2 contenedor-navbar-catalogo d-flex justify-content-center align-items-top">
<div class="catalogo-navbar">
<ul style="list-style-type: none">
<li><button href="" class="filtro-catalogo" id="filt_mas">Hombre</button></li>
<li><button href="" class="filtro-catalogo" id="filt_fem">Mujer</button></li>
<li><button href="" class="filtro-catalogo" id="filt_inf">Infantes</button></li>
</ul>
</div>
</div>
<div class="col-md-10">
<h1 class="titulo-catalogo">Catálogo</h1>
<div id="main__prods" class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-xl-4 g-6">
</div>
</div>
</div>
</div>
<!-- </section> -->
</main>
<!-- ================= FOOTER ============== -->
<footer class="text-center text-lg-center justify-content-center d-flex mt-auto" id="footer"></footer>
<!-- ================= JS ============== -->
<!--Bootstrap-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
crossorigin="anonymous"></script>
<!--JS Nabvar & Footer-->
<script src="./js/navfooter.js"></script>
<!-- Productos -->
<script src="./js/productos2.js"></script>
</body>
</html>
I want to show my filtered items with a button
</details>
# 答案1
**得分**: 0
你可以更改`addItem`函数，直接替换显示产品列表的容器的内容，这样过滤不会继续添加更多项目。以下是一种实现方式（请注意，函数已重命名以更准确地反映其目的）：
```js
function showProducts(prods) {
document.getElementById("main__prods").innerHTML =
prods.map(prod => `这里返回HTML内容...`).join('');
}
然后，使用Array#filter根据gen字段获取匹配的元素，然后再次使用新数组调用showProducts。
filt_mas.addEventListener("click", function(event){
showProducts(prod1.filter(prod => prod.gen === "mas"));
});
filt_fem.addEventListener("click", function(event){
showProducts(prod1.filter(prod => prod.gen === "fem"));
});
filt_inf.addEventListener("click", function(event){
showProducts(prod1.filter(prod => prod.gen === "inf"));
});
英文:
You can change the addItem function to directly replace the content of the container showing the list of products so that filtering won't keep adding more items. Here is one way to implement it (note that the function has been renamed to more accurately reflect its purpose):
function showProducts(prods) {
document.getElementById("main__prods").innerHTML =
prods.map(prod => `html to return here...`).join('');
}
Then, use Array#filter to get matching elements by the gen field, then call showProducts again with the new array.
filt_mas.addEventListener("click", function(event){
showProducts(prod1.filter(prod => prod.gen === "mas"));
});
filt_fem.addEventListener("click", function(event){
showProducts(prod1.filter(prod => prod.gen === "fem"));
});
filt_inf.addEventListener("click", function(event){
showProducts(prod1.filter(prod => prod.gen === "inf"));
});
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论