Hi as you will see in my code below I have items in my HTML that I am using JavaScript filtering to click on them and bring up other items. I also have buttons that will filter the content as well. And the filtered content is getting added dynamically.
I can totally make everything work the way I want but in order to do that, I have to chain click events to make another filter. I know that each time I filter the content it loses the click event.
I want the clickable elements and buttons to always retain their original click filter no matter what. Is this possible? I want to avoid endless chaining.
Here is my JavaScript code:
filterProjects.forEach(function(btn) {
btn.addEventListener('click', function(e) {
const category = e.currentTarget.dataset.id;
const projectCategory = projectCards.filter(function(projectItem) {
if (projectItem.category === category) {
return projectItem;
}
});
if (category === "all") {
displayProjectItems(projects);
} else {
displayProjectItems(projectCategory);
}
const childElements = portfolioGrid.children;
const arr = Array.prototype.slice.call(childElements);
let btnArr = arr.splice(0, 3);
console.log(arr);
arr.forEach(function callback(btn) {
btn.addEventListener('click', function(e) {
var data = e.currentTarget.dataset.id;
var projectCategory = projects.filter(function(portfolioProjectItems) {
if (portfolioProjectItems.dataId === data) {
return portfolioProjectItems;
}
});
if (data === "all") {
projectProjects(projectCategory);
} else {
projectProjects(projectCategory);
}
const childElements = portfolioGrid.children;
const arr = Array.prototype.slice.call(childElements);
let btnBTNArr = arr.splice(0, 3);
console.log(btnBTNArr);
btnBTNArr.forEach(function(event) {
event.addEventListener('click', function(e){
const category = e.currentTarget.dataset.id;
const projectCategory = projectCards.filter(function(projectItem) {
if (projectItem.category === category) {
return projectItem;
}
});
if (category === "all") {
displayProjectItems(projectCards);
} else {
displayProjectItems(projectCategory);
}
});
});
});
});
btnArr.forEach(function(event) {
event.addEventListener('click', function(e){
const category = e.currentTarget.dataset.id;
const projectCategory = projectCards.filter(function(projectItem) {
if (projectItem.category === category) {
return projectItem;
}
});
if (category === "all") {
displayProjectItems(projectCards);
} else {
displayProjectItems(projectCategory);
}
});
});
});
function displayProjectItems(projectItems) {
let projBTN;
for (let i = 0; i < projectItems.length; ++i) {
projBTN = `
<a href="../pages/portfolio-test.html" id="graphicDesign-btn" class="projects-btn active" type="button" data-id="GraphicDesign">Graphic Design</a>
<a href="#" id="webDesign" class="filter-projects projects-btn" type="button" data-id="webDesign">Web Design</a>
<a href="#" id="CAHQ" class="filter-projects projects-btn active" type="button" data-id="CAHQ">${projectItems[i].headingtTitle}</a>
`
}
let displayProjectItem = projectItems.map(function(item) {
return `
<a href="#" id="${item.id}" data-id="${item.id}" class="portfolio__item content-container ${item.class}">
<img class="portfolio__image" src="${item.img}" alt="TAFE Logo" />
<div class="portfolio__clientName">
<h3 class="portfolio__clientName-text">${item.title}</h3>
</div> <!-- end portfolio__clientName -->
</a>`;
});
let displayTitle = projectItems.map(function(titleItem) {
return `<h2 class="text-title ${titleItem.class} hidden">${titleItem.headingtTitle}</h2>`;
});
displayProjectItem = displayProjectItem.join("");
portfolioGrid.innerHTML = projBTN + displayProjectItem;
displayTitle = displayTitle.join("");
headerHero.innerHTML = displayTitle;
}
function projectProjects(projectProjectsItems) {
let projBTN;
for (let i = 0; i < projectProjectsItems.length; ++i) {
projBTN = `
<a href="../pages/portfolio-test.html" id="graphicDesign-btn" class="projects-btn active" type="button" data-id="GraphicDesign">Graphic Design</a>
<a href="#" id="webDesign" class="filter-projects projects-btn" type="button" data-id="webDesign">Web Design</a>
<a href="#" id="${projectProjectsItems[i].dataContent}" class="filter-projects projects-btn active" type="button" data-id="${projectProjectsItems[i].dataContent}">${projectProjectsItems[i].btnTitle}</a>
`
}
let didplayProjectsProjectsItems = projectProjectsItems.map(function(item) {
return `
<div id="${item.dataId}" class="${item.id}"><h2 class="projects__heading">${item.title}</h2>
<div class="projects__info">
<div class="projects__description">${item.description}</div> <!-- end project__description -->
<div class="projects__ID">
<p class="date">Created: ${item.date}</p>
<p class="client">Client: ${item.client}</p>
<p class="role">Role: ${item.role}</p>
<p class="project-type">Project Type: ${item.projectType}</p>
<p class="programs">Programs Used: ${item.program1}</p>
</div> <!-- end project__header -->
</div> <!-- end project__info -->
<div class="projects__gallery">
<div class="projects__image"><img src="../img/CAHQ/CAHQ-Brochure-Inside.jpg" alt=""></div>
<div class="projects__image">${item.img}</div>
</div>
</div>`;
});
let displayTitle = projectProjectsItems.map(function(titleItem) {
return `<h2 class="text-title ${titleItem.id} hide">${titleItem.btnTitle}</h2>`;
});
didplayProjectsProjectsItems = didplayProjectsProjectsItems.join("");
portfolioGrid.innerHTML = projBTN + didplayProjectsProjectsItems;
displayTitle = displayTitle.join("");
headerHero.innerHTML = displayTitle;
}
});
Here is the HTML:
<div id="portfolio_content_container">
<div class="portfolio__grid">
<div class="button-container">
<a href="../pages/portfolio-test.html" id="graphicDesign-btn" class="projects-btn active" type="button" data-id="GraphicDesign">Graphic Design</a>
<a id="webDesign-btn" class="filter-projects projects-btn" type="button" data-id="webDesign">Web Design</a>
<a id="project-btn" href="#" class="filter-projects projects-btn hidden" type="button" data-id="blank">blank</a>
</div>
<!--
<a href="#" id="TAFE" class="portfolio__item filter-projects TAFE" data-id="TAFE">
<img class="portfolio__image" src="../img/image-confetti.jpg" alt="TAFE logo" />
<div class="portfolio__clientName">
<h3 id="TAFE" class="portfolio__clientName-text">TAFE (Theatre Arts For Everyone)</h3>
</div> <!--
</a>
<!--
<a href="#" id="CAHQ" class="portfolio__item filter-projects CAHQ" data-id="CAHQ">
<img class="portfolio__image" src="../img/image-confetti.jpg" alt="CAHQ Brochure" />
<div class="portfolio__clientName">
<h3 id="CAHQ" class="portfolio__clientName-text">College Admissions HQ</h3>
</div> <!--
</a>
<!--
<a href="#" id="PWC" class="portfolio__item filter-projects PWC" data-id="PWC">
<img class="portfolio__image" src="../img/image-confetti.jpg" alt="pilates wellness center logo" />
<div class="portfolio__clientName">
<h3 id="PWC" class="portfolio__clientName-text">Pilates Wellness Center of York</h3>
</div> <!--
</a>
<!--
<a href="../pages/graphic_design/jane_daisy_general/jane_daisy_general.html" class="portfolio__item filter-projects" data-id="JDG">
<img class="portfolio__image" src="../img/image-confetti.jpg" alt="jane dasie general logo" />
<div class="portfolio__clientName">
<h3 class="portfolio__clientName-text">Jane Daisy General</h3>
</div> <!--
</a>
<!--
<a href="../pages/graphic_design/secondEncounter/secondEncounter.html" class="portfolio__item filter-projects" data-id="secondEncounter">
<img class="portfolio__image" src="../img/image-confetti.jpg" alt="secondEncounter logo" />
<div class="portfolio__clientName">
<h3 class="portfolio__clientName-text">secondEncounter</h3>
</div> <!--
</a>
<!--
<a href="#" class="portfolio__item filter-projects" data-id="DB">
<img class="portfolio__image" src="../img/image-confetti.jpg" alt="Dobbs & Bishop" />
<div class="portfolio__clientName">
<h3 class="portfolio__clientName-text">Dobbs & Bishop Fine Cheese</h3>
</div> <!--
</a>
<!--
<a href="../pages/graphic_design/yorkfest/yorkfest.html" class="portfolio__item filter-projects" data-id="Yorkfest">
<img class="portfolio__image" src="../img/image-confetti.jpg" alt="Yorkfest Logo" />
<div class="portfolio__clientName">
<h3 class="portfolio__clientName-text">Yorkfest</h3>
</div> <!--
</a>
<!--
<a href="../pages/graphic_design/lish/lish.html" class="portfolio__item filter-projects" data-id="Lish">
<img class="portfolio__image" src="../img/image-confetti.jpg" alt="Lish Logo" />
<div class="portfolio__clientName">
<h3 class="portfolio__clientName-text">Lish</h3>
</div> <!--
</a>
<!--
<a href="#" id="PE" class="portfolio__item filter-projects PE" data-id="PE">
<img class="portfolio__image" src="../img/image-confetti.jpg" alt="Columbia-Wrightsville Bridge Book Cover" />
<div class="portfolio__clientName">
<h3 id="PE" class="portfolio__clientName-text">Photo Essays</h3>
</div> <!--
</a>
</div> <!--
<div class="button-container-bottom">
<a class="filter-projects active" type="button" data-id="graphicDesign">Graphic Desing</a>
<a class="filter-projects" type="button" data-id="webDesign">Web Design</a>
</div>
</div> <!--
What I have tried:
I've tried so much! Is there anything I can do? I just want this to work and if not I will just scrap it and try something completely new without filters.
Submit an article or tip