我想将图像/项目分为 4 类：所有、城市主义、建筑和室内设计。然后，当您单击子类别时，它也会被过滤，当您单击子类别时，它也会过滤图像。但是，出了问题，内部过滤器根本不起作用。我尝试了以下操作，我希望它像嵌套过滤器一样，但它仍然不起作用。即使我尝试放置子类别的类，它也没有显示任何内容。预先感谢。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AAC - Projects</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script src="js/bootstrap.bundle.js"></script>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
/>
<link
rel="stylesheet"
href="path/to/font-awesome/css/font-awesome.min.css"
/>
<link
rel="apple-touch-icon"
sizes="180x180"
href="images/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="images/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="images/favicon-16x16.png"
/>
<link rel="manifest" href="images/site.webmanifest" />
<link href="styles/stylesheet.css" rel="stylesheet" />
<link rel="stylesheet" href="styles/miragestylesheet.css" />
<link rel="stylesheet" href="styles/projects.css" />
</head>
<body>
<nav class="navbar fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">
<img
class="logo"
src="images/aac BLACK GREY 2023.png"
alt=""
srcset=""
style="width: 120px; height: 120px"
/>
</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="offcanvas"
data-bs-target="#offcanvasNavbar"
aria-controls="offcanvasNavbar"
>
<div class="hamburger">
<div class="top-bun"></div>
<div class="meat"></div>
<div class="bottom-bun"></div>
</div>
</button>
<div
class="offcanvas offcanvas-end"
tabindex="-1"
id="offcanvasNavbar"
aria-labelledby="offcanvasNavbarLabel"
>
<div class="offcanvas-header">
<button
type="button"
class="btn-close"
data-bs-dismiss="offcanvas"
aria-label="Close"
></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html"
>Home</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="projects.html">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="aboutus.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="news.html">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="career.html">Career</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="futiristic.html">Futiristic</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
<div class="about_section">
<br />
<h1>projects</h1>
<ul class="switcher">
<li data-cat=".all" class="active">All</li>
<li data-cat=".urb" id="show">
Urbanism
<ul class="switcher" id="content" style="display: none">
<li data-cat=".cityscale">City Scale</li>
<li data-cat=".residential">Residential</li>
<li data-cat=".entertainment">Entertainment</li>
</ul>
</li>
<li data-cat=".arch" id="showarch">
Architecture
<ul class="switcher" id="contentarch" style="display: none">
<li data-cat=".adminstrative">Adminstrative</li>
<li data-cat=".commercial">Commercial</li>
<li data-cat=".hospitality">Hospitality</li>
<li data-cat=".residential">Residential</li>
<li data-cat=".educational">Educational</li>
<li data-cat=".cultural">Cultural</li>
<li data-cat=".entertainment">Entertainment</li>
<li data-cat=".medical">Medical</li>
<li data-cat=".religious">Religious</li>
<li data-cat=".restoration">Restoration</li>
<li data-cat=".infrastructure">Infrastructure</li>
</ul>
</li>
<li data-cat=".int" id="showint">
Interior Design
<ul class="switcher" id="contentint" style="display: none">
<li data-cat=".residential">Residential</li>
<li data-cat=".commercial">Commercial</li>
<li data-cat=".cultural">Cultural</li>
</ul>
</li>
</ul>
</div>
<br />
<br />
<div class="container large">
<div class="gallery">
<a href="index.html"
><img
class="all urb residential"
src="images/1.jpg"
alt="Sample photo"
/></a>
<a href="index.html"
><img
class="all urb entertainment"
src="images/1.jpg"
alt="Sample photo"
/></a>
<a href="index.html"
><img
class="all urb cityscale"
src="images/12pp.jpg"
alt="Sample photo"
/></a>
</div>
</div>
<div class="small">
<main class="grid">
<a href="index.html"
><img class="all urb cityscale" src="images/1.jpg" alt="Sample photo"
/></a>
<a href="index.html"
><img
class="all urb residential"
src="images/low-angle-greyscale-building-with-modern-brutalist-architecture-sunlight.jpg"
alt="Sample photo"
/></a>
<a href="index.html"
><img
class="all urb entertainment"
src="images/1.jpg"
alt="Sample photo"
/></a>
<a href="index.html"
><img
class="all arch"
src="images/low-angle-greyscale-building-with-modern-brutalist-architecture-sunlight.jpg"
alt="Sample photo"
/></a>
</main>
</div>
<br />
<br />
<div class="footer">
<div class="row">
<div class="col-12">
<a
class="btn btn-outline-dark btn-floating m-1"
href="https://wa.me/+201111007091?text=urlencodedtext"
role="button"
><i class="fab fa-whatsapp" aria-hidden="true"></i
></a>
<a
class="btn btn-outline-dark btn-floating m-1"
href="https://www.instagram.com/aac.consultant/"
role="button"
><i class="fab fa-instagram"></i
></a>
<!-- Linkedin -->
<a
class="btn btn-outline-dark btn-floating m-1"
href="https://www.linkedin.com/company/arab-american-consultants/about/?viewAsMember=true"
role="button"
><i class="fab fa-linkedin-in"></i
></a>
<!-- Behance -->
<a
class="btn btn-outline-dark btn-floating m-1"
href="https://www.behance.net/60fd0eab"
role="button"
><i class="fa-brands fa-behance"></i
></a>
<!-- Pinterest-->
<a
class="btn btn-outline-dark btn-floating m-1"
href="https://www.pinterest.com/ArabAmericanConsultants/"
role="button"
><i class="fa-brands fa-pinterest"></i
></a>
</div>
</div>
<br />
<div class="row">
<div class="col-12" style="font-family: 'made_miragethin'">
© 2023 Arab American Consultants . All Rights Reserved.
</div>
<br />
<br />
</div>
</div>
<script src="projects.js"></script>
</body>
</html>
let switcherLi = document.querySelectorAll(".switcher li");
let imgs = Array.from(document.images);
switcherLi.forEach((li) => {
li.addEventListener("click", removeActive);
li.addEventListener("click", filter);
});
function removeActive() {
switcherLi.forEach((li) => {
li.classList.remove("active");
this.classList.add("active");
});
}
function filter() {
imgs.forEach((img) => {
if (!img.classList.contains("logo")) {
img.style.display = "none";
}
});
document.querySelectorAll(this.dataset.cat).forEach((el) => {
el.style.display = "block";
});
}
var urbanismElement = document.getElementById("show");
var contentElement = document.getElementById("content");
urbanismElement.onclick = function (event) {
if (event.target === urbanismElement) {
if (contentElement.style.display === "none") {
contentElement.style.display = "block";
archcontent.style.display = "none"; // Hide architecture subcategories
intcontent.style.display = "none"; // Hide interior design subcategories
} else {
contentElement.style.display = "none";
}
}
};
var archelement = document.getElementById("showarch");
var archcontent = document.getElementById("contentarch");
archelement.onclick = function (event) {
if (event.target === archelement) {
if (archcontent.style.display === "none") {
archcontent.style.display = "block";
contentElement.style.display = "none"; // Hide urbanism subcategories
intcontent.style.display = "none"; // Hide interior design subcategories
} else {
archcontent.style.display = "none";
}
}
};
var intelement = document.getElementById("showint");
var intcontent = document.getElementById("contentint");
intelement.onclick = function (event) {
if (event.target === intelement) {
if (intcontent.style.display === "none") {
intcontent.style.display = "block";
contentElement.style.display = "none"; // Hide urbanism subcategories
archcontent.style.display = "none"; // Hide architecture subcategories
} else {
intcontent.style.display = "none";
}
}
};
var allElement = document.querySelector('.switcher li[data-cat=".all"]');
var categoryElements = document.querySelectorAll(".switcher li[data-cat]");
allElement.onclick = function (event) {
if (event.target === allElement) {
for (var i = 0; i < categoryElements.length; i++) {
categoryElements[i].classList.remove("active");
}
allElement.classList.add("active");
contentElement.style.display = "none";
archcontent.style.display = "none";
intcontent.style.display = "none";
}
};
@import url("https://fonts.googleapis.com/css2?family=Advent+Pro&family=Amatic+SC&family=Bricolage+Grotesque:[email protected]&family=Cardo&family=Comfortaa:wght@300&family=Domine&family=Gruppo&family=Indie+Flower&family=Kodchasan:wght@300;500&family=Lato&family=Oswald&family=Playfair+Display+SC&family=Playfair+Display:wght@500&family=Roboto:wght@100&family=Rubik:ital,wght@1,300&family=Syncopate:wght@400;700&family=Urbanist&display=swap");
* {
font-family: "laluxesserifw05-regularRg";
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "MADEMirage-Thin";
src: url("MADEMirage-Thin.ttf.woff") format("woff"),
url("MADEMirage-Thin.ttf.svg#MADEMirage-Thin") format("svg"),
url("MADEMirage-Thin.ttf.eot"),
url("MADEMirage-Thin.ttf.eot?#iefix") format("embedded-opentype");
font-weight: normal;
font-style: normal;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
p {
font-family: "made_miragethin";
}
section {
padding-top: 30px;
height: 100vh;
display: flex;
justify-content: center;
scroll-snap-align: start;
}
.container {
scroll-snap-type: y mandatory;
overflow-y: scroll;
height: 100vh;
}
.navbar-brand {
margin-right: 0;
}
.navbar-nav {
align-items: center;
}
.navbar .navbar-nav .nav-link {
color: black;
font-size: 1.1em;
padding: 0.5 1em;
}
.nav-item {
font-size: 14px;
font-weight: Regular;
}
.about_section {
padding-top: 80px;
padding-left: 30px;
padding-right: 30px;
text-align: center;
justify-content: center;
}
.about_section h1 {
text-align: center;
}
.footer {
text-align: center;
}
.gallery {
--s: 150px; /* control the size */
--g: 10px; /* control the gap */
--f: 1.5; /* control the scale factor */
width: 100vw;
height: 100vh;
display: grid;
gap: var(--g);
width: calc(7 * var(--s) + 6 * var(--g));
aspect-ratio: 1;
grid-template-columns: repeat(3, auto);
}
.gallery > a {
display: contents;
}
.gallery img {
width: 0;
height: 0;
min-height: 100%;
min-width: 100%;
object-fit: cover;
cursor: pointer;
filter: grayscale(80%);
transition: 0.35s linear;
}
.gallery img:hover {
filter: grayscale(0);
width: calc(var(--s) * var(--f));
height: calc(var(--s) * var(--f));
}
body {
margin: 0;
display: grid;
place-content: center;
}
.container {
display: flex;
align-items: center;
justify-content: center;
}
@media screen and (max-width: 700px) {
div.large {
display: none;
}
}
/***** for mobiles *****/
@media (min-width: 699px) {
.cont {
display: none;
}
}
@media (min-width: 699px) {
div.small {
display: none;
}
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-gap: 20px;
align-items: stretch;
}
.grid img {
border: 1px solid #ccc;
box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);
max-width: 100%;
margin-left: 5px;
}
.grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
justify-content: center;
gap: 10px;
}
.grid div {
max-height: 300px;
}
.switcher {
position: relative;
margin: 0 auto;
display: flex;
list-style: none;
width: fit-content;
align-items: stretch;
padding: 10px 10px;
justify-content: space-evenly;
width: 90vw;
}
.switcher li {
border-radius: 4px;
padding: 10px 10px;
background-color: white;
cursor: pointer;
transition: 0.2s linear;
font-size: 12px;
user-select: none;
margin: 5px;
justify-content: center;
align-items: center;
display: flex;
display: inline-block;
cursor: pointer;
}
.content div {
display: none;
margin-top: 10px;
}
.switcher .switcher {
position: absolute;
z-index: 9999;
width: 90vw;
left: 0;
}
.switcher ul li ul {
list-style-type: circle;
}
/* .navbar*/
.hamburger {
display: flex;
align-self: center;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 26px;
cursor: pointer;
}
.hamburger div {
align-self: flex-end;
height: 2px;
width: 100%;
background-color: black;
mix-blend-mode: difference;
}
.hamburger .meat {
width: 70%;
transition: all 200ms ease-in-out;
}
.hamburger .bottom-bun {
width: 90%;
transition: all 400ms ease-in-out;
}
.hamburger:hover div {
width: 100%;
background-color: black;
mix-blend-mode: difference;
}
.hamburger:hover .top-bun {
animation: burger-hover 1s infinite ease-in-out alternate;
}
.hamburger:hover .meat {
animation: burger-hover 1s infinite ease-in-out alternate forwards 200ms;
}
.hamburger:hover .bottom-bun {
animation: burger-hover 1s infinite ease-in-out alternate forwards 400ms;
}
@keyframes burger-hover {
0% {
width: 100%;
}
50% {
width: 50%;
}
100% {
width: 100%;
}
}
.navbar-toggler,
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
outline: none;
border: none;
box-shadow: none;
}
.switcher {
position: relative;
margin: 0 auto;
display: flex;
list-style: none;
width: fit-content;
align-items: stretch;
padding: 10px 10px;
justify-content: space-evenly;
width: 90vw;
}
.switcher li {
border-radius: 4px;
padding: 10px 10px;
background-color: white;
cursor: pointer;
transition: 0.2s linear;
font-size: 12px;
user-select: none;
margin: 5px;
justify-content: center;
align-items: center;
display: flex;
display: inline-block;
cursor: pointer;
}
.content div {
display: none;
margin-top: 10px;
}
.switcher .switcher {
position: absolute;
z-index: 9999;
width: 90vw;
left: 0;
}
您似乎正在尝试根据类别和子类别对图库图像实施嵌套过滤。您当前的方法存在一些问题：
ID 应该是唯一的：您有多个具有相同 ID 的元素 (
id="content"事件处理：单击子类别时，
removeActivefilter子类别的可见性：您正在切换子类别的可见性，但您没有在
filter这里有一个简化的 JavaScript 代码片段，可以帮助您入门：
let mainCats = document.querySelectorAll('.switcher > li');
let subCats = document.querySelectorAll('.switcher .switcher li');
let imgs = Array.from(document.images);
mainCats.forEach((li) => {
li.addEventListener('click', (e) => {
mainCats.forEach(li => li.classList.remove('active'));
li.classList.add('active');
filterImages(li.dataset.cat);
});
});
subCats.forEach((li) => {
li.addEventListener('click', (e) => {
e.stopPropagation(); // Prevent parent category click event
subCats.forEach(li => li.classList.remove('active'));
li.classList.add('active');
filterImages(li.dataset.cat);
});
});
function filterImages(cat) {
imgs.forEach((img) => {
if (!img.classList.contains('logo')) {
img.style.display = img.classList.contains(cat.substring(1)) ? 'block' : 'none';
}
});
}
这应该为您提供一个良好的起点。相应地修改您的 HTML 和 CSS 以匹配此新设置。
let mainCats = document.querySelectorAll('.switcher > li');
let subCats = document.querySelectorAll('.switcher .switcher li');
let imgs = Array.from(document.images);
mainCats.forEach((li) => {
li.addEventListener('click', (e) => {
mainCats.forEach(li => li.classList.remove('active'));
li.classList.add('active');
filterImages(li.dataset.cat);
});
});
subCats.forEach((li) => {
li.addEventListener('click', (e) => {
e.stopPropagation(); // Prevent parent category click event
subCats.forEach(li => li.classList.remove('active'));
li.classList.add('active');
filterImages(li.dataset.cat);
});
});
function filterImages(cat) {
imgs.forEach((img) => {
if (!img.classList.contains('logo')) {
img.style.display = img.classList.contains(cat) ? 'block' : 'none';
}
});
}/* ... existing styles ... */
/* Added styles to handle active state */
.switcher li.active {
background-color: gray;
color: white;
}<!-- ... -->
<div class="about_section">
<br />
<h1>projects</h1>
<ul class="switcher">
<li data-cat="all" class="active">All</li>
<li data-cat="urb">
Urbanism
<ul class="switcher">
<li data-cat="cityscale">City Scale</li>
<li data-cat="residential">Residential</li>
<li data-cat="entertainment">Entertainment</li>
</ul>
</li>
<li data-cat="arch">
Architecture
<ul class="switcher">
<li data-cat="adminstrative">Adminstrative</li>
<!-- ... other subcategories ... -->
</ul>
</li>
<!-- ... other main categories ... -->
</ul>
</div>
<!-- ... -->