【发布时间】：2021-10-10 21:05:31
【问题描述】：
我有以下问题； 我用过滤器制作了一个画廊，但是如果我点击移动，例如，那么只有一张图片显示，虽然类别移动中有很多图片。 所以当我点击一个类别时，我想显示该类别中的所有图片
这里是代码
你好， 我有以下问题； 我用过滤器制作了一个画廊，但是如果我点击移动，例如，那么只有一张图片显示，虽然类别移动中有很多图片。 所以当我点击一个类别时，我想显示该类别中的所有图片
这里是代码
<!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">
<title>Document</title>
<style>
body{
padding: 0;
margin: 0;
box-sizing: border-box;
}
p{
outline: 2px solid red;
padding-inline-start: 20px;
writing-mode: vertical-rl;
}
section{
padding: 20px;
width: 1280px;
margin: 0 auto;
}
section ul{
display: flex;
list-style: none;
padding-left: 0;
}
section ul .liste{
padding: 10px 30px;
background-color: #eee;
margin: 10px 10px;
border-radius: 2px;
user-select: none;
cursor: pointer;
}
/* خدعة عمل كلاس */
ul .liste.active,
ul .liste:hover{
background-color: #7C0501;
color: #fff;
}
.product{
display: flex;
flex-wrap: wrap;
}
@media (max-width:700px) {
.product{
display: block;
flex-wrap: wrap;
}
}
/* خدعة الصور */
.product .itemBox{
position: relative;
width: 300px;
height: 300px;
}
.product .itemBox img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<p>MUHAMMAD</p>
<section>
<ul>
<li class="liste active" data-filter="All">All</li>
<li class="liste" data-filter=".mobile"> Mobile</li>
<li class="liste" data-filter=".camera"> Camera</li>
<li class="liste" data-filter=".watch"> Uhren</li>
<li class="liste" data-filter=".shoes"> Schuhe</li>
<li class="liste" data-filter=".headphone"> Headphone </li>
</ul>
<div class="product">
<div class="itemBox mobile "> <img src="pics/mobile1.jpg" alt=""></div>
<div class="itemBox mobile"> <img src="pics/mobile2.jpg" alt=""></div>
<div class="itemBox mobile"> <img src="pics/mobile3.jpg" alt=""></div>
<div class="itemBox mobile"> <img src="pics/mobile4.jpg" alt=""></div>
<div class="itemBox mobile"> <img src="pics/mobile5.jpg" alt=""></div>
<div class="itemBox shoes"> <img src="pics/shoe1.jpg" alt=""></div>
<div class="itemBox shoes"> <img src="pics/shoe2.jpg" alt=""></div>
<div class="itemBox shoes"> <img src="pics/shoe3.jpg" alt=""></div>
<div class="itemBox shoes"> <img src="pics/shoe4.jpg" alt=""></div>
<div class="itemBox watch"> <img src="pics/watch1.jpg" alt=""></div>
<div class="itemBox watch"> <img src="pics/watch2.jpg" alt=""></div>
<div class="itemBox watch"> <img src="pics/watch3.jpg" alt=""></div>
<div class="itemBox watch"> <img src="/pics/watch4.jpg" alt=""></div>
<div class="itemBox camera"> <img src="/pics/camera1.jpg" alt=""></div>
<div class="itemBox headphone"> <img src="/pics/headphone1.jpg" alt=""></div>
</div>
</section>
<script>
let filtern=document.querySelectorAll(".liste");
let filterArray=Array.from(filtern);
let divs=document.querySelectorAll(".product>div");
let divArray=Array.from(divs);
for(i=0; i<filterArray.length;i++){
filterArray[i].addEventListener("click",(e)=>{
let clicko=e.currentTarget;
for(i=0; i<filterArray.length;i++){
filterArray[i].classList.remove("active")
clicko.classList.add("active")
}
for(let i =0;i<divArray.length; i++){
divArray[i].style.display="none"
}
///////// هسا عملية الربط بين الكلاسات بالمحتوى و الايديات تبع التابات ////////////
// dataset بتجبلك المعلومات التابعة للديف يلي له علاقة بالتارغت
document.querySelector(clicko.dataset.filter).style.display="block"
})
}
</script>
</body>
</html>
【问题讨论】：
标签： javascript html css filter gallery