在我对问题进行分类后，纠结是不起作用的

Question

我是一个初学者，因此通过项目学习。这是一个常见问题项目，我正在努力。

这里有问题和答案，我把它们分为几类。如果我选择第一个类别-"所有"-显示所有问题，或者当我点击另一个类别时，只有与该类别相关的问题显示，其他问题被隐藏。

类似地，当我点击一个问题时，它各自的答案应该在我切换时显示或隐藏。这就是我想要实现的。

现在，当页面加载并且我点击问题时，它们各自的答案会隐藏并显示(切换(——正如我所期望的那样工作得很好。注意：只有当我刷新页面时，它才起作用。

但我的问题是，当我点击包括"所有"在内的类别时，显示和隐藏问题的功能消失了。它不适用于任何类别。

换句话说，我点击一个类别，然后点击一个问题来检查答案，切换根本不起作用。

这是我的代码(faqsearch(：

请帮我找到这两个问题的解决方案：

1. 我做错了什么，哪里做错了
2. 如何解决

谢谢！

const database = [{
id: 1,
question: `Maecenas luctus purus in enim vestibulum pretium. Nam in turpis nec? `,
answer: `Maecenas luctus purus in enim vestibulum pretium. Aliquam erat volutpat. Vivamus auctor euismod metus nec convallis. Nam in turpis nec tortor porta pretium non vel nunc. Praesent varius ac enim eget viverra. Donec et volutpat diam, id hendrerit lacus. Suspendisse feugiat viverra mattis. Etiam pulvinar dolor id consectetur pretium.`,
img: [""],
category: "newdelhi",
},
{
id: 4,
question: `Curabitur augue risus, pulvinar in elementum vitae?`,
answer: `Vivamus mattis commodo felis, sed scelerisque turpis auctor in. Nulla facilisi. Etiam id rhoncus eros. Integer eu sollicitudin nisi. Aliquam ut massa nec sem laoreet tempor non eu augue. Sed gravida ultrices porta. Ut vel metus tempor, convallis urna at, vehicula lectus.`,
img: [""],
category: "canberra",
},
{
id: 5,
question: `Proin aliquam pretium congue. Sed fringilla venenatis dictum?`,
answer: `Nam interdum viverra purus quis sagittis. Nunc sed euismod quam, non volutpat diam. Fusce turpis metus, iaculis nec ultrices et, fringilla a felis. In vestibulum, quam eget fermentum ornare, enim ante vehicula est, vel pulvinar odio enim in nibh. Integer eget purus augue.`,
img: [""],
category: "newdelhi",
},
{
id: 8,
question: `Nullam a purus ac felis aliquam eleifend?`,
answer: `Curabitur augue risus, pulvinar in elementum vitae, malesuada et lacus. Ut id ante id neque semper interdum. Proin euismod dolor nec dapibus tempus. Suspendisse et eros non turpis feugiat sodales. Curabitur nec posuere sem.`,
img: [""],
category: "canberra",
},
];
// class selectors
const commonIssues = document.querySelector(".common-issues");
const topics = document.querySelector(".topics");
const form = document.querySelector(".search-form");
const input = document.getElementById("search");
const navBtns = document.querySelectorAll(".nav-btn");
const icons = document.querySelectorAll(".a-icons");
// function displayManual
function displayQNS(arrayData) {
const manuals = arrayData
.map((ad) => {
return `<div class="issues-solutions">
<p class="issue-item">
${ad.question}<i class="fas fa-plus"></i>
<i class="fas fa-minus"></i>
</p>
<p class="solution-item">
${ad.answer}
</p>
<div class="solution-item">
${ad.img.map((i) => {
return `<img src="${i}" class="image-item"/>`;
})}</div>
</div>`;
})
.join("");
topics.innerHTML = manuals;
}
displayQNS(database);
// class selectors
const questions = document.querySelectorAll(".issue-item");
const answers = document.querySelectorAll(".solution-item");
const questionAnswers = document.querySelectorAll(".issues-solutions");
//function filter questions
function filterCategory(navs) {
navs.forEach((btns) => {
btns.addEventListener("click", (btn) => {
const btnCategory = btn.currentTarget.dataset.id;
const itemCategory = database.filter((item) => {
if (btnCategory === item.category) {
return item.category;
}
});
if (btnCategory === "all") {
displayQNS(database);
} else {
displayQNS(itemCategory);
}
});
});
}
filterCategory(navBtns);
// function show hide solutions
function toggleSolutions() {
questions.forEach((q) => {
q.addEventListener("click", (btn) => {
const current = btn.currentTarget;
current.classList.toggle("item-bg");
current.childNodes[1].classList.toggle("hide-item");
current.childNodes[3].classList.toggle("show-item");
answers.forEach((a) => {
if (current.parentElement === a.parentElement) {
a.classList.toggle("show-item");
}
});
});
});
}
toggleSolutions();

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap");
:root {
--hover-color: #edf2f7;
--primary-text: #2d3748;
--secondary-text: #eb7304;
--border-color: #cbd5e0;
--white-color: #fff;
}
*,
html {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100vw;
height: 100vh;
font-size: 16px;
font-family: "Roboto", sans-serif;
color: var(--primary-text);
overflow-x: hidden;
}
.container {
padding: 1rem;
height: 100%;
display: grid;
grid-gap: 1rem;
grid-template-columns: 1fr 3fr;
grid-template-rows: auto;
}
.related-links {
margin: 1rem;
padding: 0.5rem;
justify-self: center;
}
.links {
list-style-type: none;
}
.title {
margin: 0.5rem;
padding: 0.5rem;
font-size: 1.1rem;
font-weight: 400;
}
.link-item {
margin: 0.5rem;
padding: 0.5rem 2rem;
cursor: pointer;
font-size: 1.1rem;
font-weight: 400;
}
.link-item:hover {
border-radius: 5px;
color: var(--white-color);
background-color: var(--secondary-text);
}
.search-section {
width: 90%;
margin: 1rem;
padding: 0.5rem;
justify-self: center;
}
.search-form {
height: 10rem;
margin: 0.5rem;
padding: 0.5rem;
text-align: center;
}
.input-field {
padding: 1.5rem;
border-radius: 5px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
border: 1px solid var(--border-color);
}
.search-icon {
font-size: 1.1rem;
color: gray;
}
#search {
width: 70%;
outline: none;
border: none;
padding: 1rem;
font-size: 1.1rem;
font-weight: 400;
background: none;
border-radius: 5px;
}
.common-issues {
margin: 0.5rem;
/* border-radius: 5px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
border: 1px solid var(--border-color); */
}
.nav-bar {
padding: 0.5rem;
text-align: center;
border-radius: 5px;
background-color: var(--secondary-text);
}
.nav-btn {
margin: 0.5rem;
padding: 0.5rem 1.5rem;
cursor: pointer;
font-size: 1.1rem;
font-weight: 400;
outline: none;
border: none;
border-radius: 5px;
background-color: var(--white-color);
}
.nav-btn:hover,
.nav-btn:focus {
border-radius: 5px;
color: var(--white-color);
background-color: var(--primary-text);
box-shadow: 0 10px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.topics {
cursor: pointer;
}
.issue-item {
margin: 0.5rem;
padding: 1rem;
font-size: 1rem;
overflow-wrap: break-word;
cursor: pointer;
line-height: 2rem;
font-weight: 500;
color: var(--secondary-text);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
position: relative;
}
.item-bg {
background-color: #212e36;
color: var(--white-color);
border-radius: 5px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.solution-item {
margin: 0.5rem;
padding: 0.5rem;
font-size: 1rem;
cursor: text;
line-height: 2rem;
font-weight: 400;
display: none;
}
.image-item {
width: 100%;
margin-right: 0.5rem;
cursor: pointer;
}
.show-item {
display: inline-block;
}
.hide-item {
display: none;
}
.fa-plus,
.fa-minus {
float: right;
padding: 0.5rem;
}
.fa-minus,
.fa-plus {
position: absolute;
right: 1rem;
}
@media (max-width: 768px) {
.container {
padding: 0.5rem;
grid-template-columns: 1fr;
}
.related-links,
.search-section {
margin: 0.5rem;
}
#search {
width: 50%;
}
}

<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
<title>FAQ</title>
</head>
<body>
<div class="container">
<main class="search-section">
<div class="common-issues">
<nav class="nav-bar">
<button class="nav-btn" type="button" data-id="all">All</button>
<button class="nav-btn" type="button" data-id="newdelhi">New Delhi</button>
<button class="nav-btn" type="button" data-id="canberra">Canberra</button>
</nav>
<div class="topics"></div>
</div>
<!-- common issues ends here -->
</main>
<!-- container ends here -->
</div>
</body>

Answer 1

问题很简单。

在更改类别时，您正在向DOM中移除/添加元素。

但是，在您的代码中，当您的应用程序加载时，您只查询页面上的元素一次。

// class selectors
const questions = document.querySelectorAll(".issue-item");
const answers = document.querySelectorAll(".solution-item");
const questionAnswers = document.querySelectorAll(".issues-solutions");

因此，当你更新列表时，你还必须刷新你的问题/答案列表等：

我做了一个快速的例子(代码中还有其他问题，但这可能会指导你(：

const database = [
{
id: 1,
question: `Maecenas luctus purus in enim vestibulum pretium. Nam in turpis nec? `,
answer: `Maecenas luctus purus in enim vestibulum pretium. Aliquam erat volutpat. Vivamus auctor euismod metus nec convallis. Nam in turpis nec tortor porta pretium non vel nunc. Praesent varius ac enim eget viverra. Donec et volutpat diam, id hendrerit lacus. Suspendisse feugiat viverra mattis. Etiam pulvinar dolor id consectetur pretium.`,
img: [""],
category: "newdelhi",
},
{
id: 2,
question: `Donec et volutpat diam, id hendrerit lacus. Etiam pulvinar dolor id consectetur pretium.?`,
answer: `Cras pellentesque sem lectus, ut accumsan velit venenatis nec. Sed condimentum eleifend eros in tincidunt. Suspendisse sit amet sapien nec velit rhoncus vestibulum. Vivamus accumsan lorem ac est ultrices, at sagittis neque hendrerit. Sed lacinia pellentesque arcu, ut tristique neque maximus nec. Maecenas pretium lobortis purus eget vehicula. Mauris scelerisque massa eget lorem dignissim, vitae rhoncus dui viverra. Integer sed nisi ac nisi posuere luctus rutrum at velit. Proin pellentesque scelerisque consectetur. Morbi ullamcorper elit sit amet diam euismod, ac eleifend tellus viverra. Sed aliquam ipsum vel est sagittis ullamcorper. Sed blandit nec augue vel varius. Nullam hendrerit quam vitae sem interdum, eu interdum enim finibus. Praesent maximus lacus ac nulla tristique, in luctus ligula tempor. Ut lacinia mauris id risus ultrices faucibus. Phasellus nec erat odio.`,
img: [""],
category: "washington",
},
{
id: 3,
question: `Sed aliquam ipsum vel est sagittis ullamcorper. Sed blandit nec augue vel varius?`,
answer: `Vivamus accumsan lorem ac est ultrices, at sagittis neque hendrerit. Sed lacinia pellentesque arcu, ut tristique neque maximus nec. Maecenas pretium lobortis purus eget vehicula. Mauris scelerisque massa eget lorem dignissim, vitae rhoncus dui viverra. Integer sed nisi ac nisi posuere luctus rutrum at velit. Proin pellentesque scelerisque consectetur. Morbi ullamcorper elit sit amet diam euismod, ac eleifend tellus viverra. Sed aliquam ipsum vel est sagittis ullamcorper. Sed blandit nec augue vel varius. Nullam hendrerit quam vitae sem interdum, eu interdum enim finibus. Praesent maximus lacus ac nulla tristique, in luctus ligula tempor. Ut lacinia mauris id risus ultrices faucibus. Phasellus nec erat odio.`,
img: [""],
category: "london",
},
{
id: 4,
question: `Curabitur augue risus, pulvinar in elementum vitae?`,
answer: `Vivamus mattis commodo felis, sed scelerisque turpis auctor in. Nulla facilisi. Etiam id rhoncus eros. Integer eu sollicitudin nisi. Aliquam ut massa nec sem laoreet tempor non eu augue. Sed gravida ultrices porta. Ut vel metus tempor, convallis urna at, vehicula lectus.`,
img: [""],
category: "canberra",
},
{
id: 5,
question: `Proin aliquam pretium congue. Sed fringilla venenatis dictum?`,
answer: `Nam interdum viverra purus quis sagittis. Nunc sed euismod quam, non volutpat diam. Fusce turpis metus, iaculis nec ultrices et, fringilla a felis. In vestibulum, quam eget fermentum ornare, enim ante vehicula est, vel pulvinar odio enim in nibh. Integer eget purus augue.`,
img: [""],
category: "newdelhi",
},
{
id: 6,
question: `Aenean sed metus sapien. In vulputate interdum est, ac iaculis leo pharetra vitae?`,
answer: `Quisque non libero quis lorem dapibus varius sit amet non velit. Phasellus sed massa vitae nisl bibendum facilisis. Curabitur augue risus, pulvinar in elementum vitae, malesuada et lacus. Ut id ante id neque semper interdum. Proin euismod dolor nec dapibus tempus. Suspendisse et eros non turpis feugiat sodales. Curabitur nec posuere sem.`,
img: [""],
category: "washington",
},
{
id: 7,
question: `Fusce eget purus odio. In dictum tortor at est lobortis accumsan?`,
answer: `Praesent rutrum, purus eget mollis semper, nisl mauris mollis urna, bibendum vehicula lorem magna non lacus. Aliquam erat volutpat. Vivamus rutrum porta ornare. Nam sem purus, rhoncus sed accumsan vel, venenatis ac sapien. Quisque sodales nisl eget metus convallis tincidunt.`,
img: [""],
category: "london",
},
{
id: 8,
question: `Nullam a purus ac felis aliquam eleifend?`,
answer: `Curabitur augue risus, pulvinar in elementum vitae, malesuada et lacus. Ut id ante id neque semper interdum. Proin euismod dolor nec dapibus tempus. Suspendisse et eros non turpis feugiat sodales. Curabitur nec posuere sem.`,
img: [""],
category: "canberra",
},
];
// class selectors
const commonIssues = document.querySelector(".common-issues");
const topics = document.querySelector(".topics");
const form = document.querySelector(".search-form");
const input = document.getElementById("search");
const navBtns = document.querySelectorAll(".nav-btn");
const icons = document.querySelectorAll(".a-icons");
// function displayManual
function displayQNS(arrayData) {
const manuals = arrayData
.map((ad) => {
return `<div class="issues-solutions">
<p class="issue-item">
${ad.question}<i class="fas fa-plus"></i>
<i class="fas fa-minus"></i>
</p>
<p class="solution-item">
${ad.answer}
</p>
<div class="solution-item">
${ad.img.map((i) => {
return `<img src="${i}" class="image-item"/>`;
})}</div>
</div>`;
})
.join("");
topics.innerHTML = manuals;
toggleSolutions();
}
displayQNS(database);
//function filter questions
function filterCategory(navs) {
navs.forEach((btns) => {
btns.addEventListener("click", (btn) => {
const btnCategory = btn.currentTarget.dataset.id;
const itemCategory = database.filter((item) => {
if (btnCategory === item.category) {
return item.category;
}
});
if (btnCategory === "all") {
displayQNS(database);        
} else {
displayQNS(itemCategory);  
}
});
});
}
filterCategory(navBtns);
// function show hide solutions
function toggleSolutions() {
const questions = document.querySelectorAll(".issue-item");
const answers = document.querySelectorAll(".solution-item");
const questionAnswers = document.querySelectorAll(".issues-solutions");
questions.forEach((q) => {
q.addEventListener("click", (btn) => {
const current = btn.currentTarget;
current.classList.toggle("item-bg");
current.childNodes[1].classList.toggle("hide-item");
current.childNodes[3].classList.toggle("show-item");      
answers.forEach((a) => {
if (current.parentElement === a.parentElement) {
a.classList.toggle("show-item");          
}
});
});
});
}
// // function search texts
// function filteredItems() {
//   const value = input.value;
//   let paragraph;
//   answers.forEach((a) => {
//     paragraph = a.textContent;
//     const regex = new RegExp(value);
//     paragraph.match(regex, "gi");
//   });
//   topics.innerHTML = `<p class="item">${paragraph} </p>`;
// }
// // event listerns
// form.addEventListener("submit", (e) => {
//   e.preventDefault();
//   filteredItems();
// });

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap");
:root {
--hover-color: #edf2f7;
--primary-text: #2d3748;
--secondary-text: #eb7304;
--border-color: #cbd5e0;
--white-color: #fff;
}
*,
html {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100vw;
height: 100vh;
font-size: 16px;
font-family: "Roboto", sans-serif;
color: var(--primary-text);
overflow-x: hidden;
}
.container {
padding: 1rem;
height: 100%;
display: grid;
grid-gap: 1rem;
grid-template-columns: 1fr 3fr;
grid-template-rows: auto;
}
.related-links {
margin: 1rem;
padding: 0.5rem;
justify-self: center;
}
.links {
list-style-type: none;
}
.title {
margin: 0.5rem;
padding: 0.5rem;
font-size: 1.1rem;
font-weight: 400;
}
.link-item {
margin: 0.5rem;
padding: 0.5rem 2rem;
cursor: pointer;
font-size: 1.1rem;
font-weight: 400;
}
.link-item:hover {
border-radius: 5px;
color: var(--white-color);
background-color: var(--secondary-text);
}
.search-section {
width: 90%;
margin: 1rem;
padding: 0.5rem;
justify-self: center;
}
.search-form {
height: 10rem;
margin: 0.5rem;
padding: 0.5rem;
text-align: center;
}
.input-field {
padding: 1.5rem;
border-radius: 5px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
border: 1px solid var(--border-color);
}
.search-icon {
font-size: 1.1rem;
color: gray;
}
#search {
width: 70%;
outline: none;
border: none;
padding: 1rem;
font-size: 1.1rem;
font-weight: 400;
background: none;
border-radius: 5px;
}
.common-issues {
margin: 0.5rem;
/* border-radius: 5px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
border: 1px solid var(--border-color); */
}
.nav-bar {
padding: 0.5rem;
text-align: center;
border-radius: 5px;
background-color: var(--secondary-text);
}
.nav-btn {
margin: 0.5rem;
padding: 0.5rem 1.5rem;
cursor: pointer;
font-size: 1.1rem;
font-weight: 400;
outline: none;
border: none;
border-radius: 5px;
background-color: var(--white-color);
}
.nav-btn:hover,
.nav-btn:focus {
border-radius: 5px;
color: var(--white-color);
background-color: var(--primary-text);
box-shadow: 0 10px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.topics {
cursor: pointer;
}
.issue-item {
margin: 0.5rem;
padding: 1rem;
font-size: 1rem;
overflow-wrap: break-word;
cursor: pointer;
line-height: 2rem;
font-weight: 500;
color: var(--secondary-text);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
position: relative;
}
.item-bg {
background-color: #212e36;
color: var(--white-color);
border-radius: 5px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.solution-item {
margin: 0.5rem;
padding: 0.5rem;
font-size: 1rem;
cursor: text;
line-height: 2rem;
font-weight: 400;
display: none;
}
.image-item {
width: 100%;
margin-right: 0.5rem;
cursor: pointer;
}
.show-item {
display: inline-block;
}
.hide-item {
display: none;
}
.fa-plus,
.fa-minus {
float: right;
padding: 0.5rem;
}
.fa-minus,
.fa-plus {
position: absolute;
right: 1rem;
}
@media (max-width: 768px) {
.container {
padding: 0.5rem;
grid-template-columns: 1fr;
}
.related-links,
.search-section {
margin: 0.5rem;
}
#search {
width: 50%;
}
}

<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
<link rel="stylesheet" href="style.css" />
<title>FAQ</title>
</head>
<body>    
<div class="container">
<aside class="related-links">
<p class="title">Related Links</p>
<ul class="links">
<li class="link-item">New Delhi</li>
<li class="link-item">Washington DC</li>
<li class="link-item">London</li>
<li class="link-item">Canberra</li>
</ul>
</aside>
<!-- related links ends here -->
<main class="search-section">
<form class="search-form">    
<span class="input-field">
<i class="fas fa-search search-icon"></i>
<input
type="search"
name="search"
id="search"
placeholder="Type to begin..." 
/>
</span>          
</form>
<!-- form ends here -->
<div class="common-issues">
<nav class="nav-bar">
<button class="nav-btn" type="button" data-id="all">All</button>
<button class="nav-btn" type="button" data-id="newdelhi">New Delhi</button>
<button class="nav-btn" type="button" data-id="washington">Washington DC</button>
<button class="nav-btn" type="button" data-id="london">London</button>
<button class="nav-btn" type="button" data-id="canberra">Canberra</button>

</nav>
<div class="topics"></div>
</div>
<!-- common issues ends here -->
</main>
<!-- container ends here -->
<script src="app.js"></script>
</body>