在我对问题进行分类后切换不起作用
Toggling does not work after I categorized questions
我是初学者，因此通过做项目来学习。这是一个我正在努力解决的常见问题解答项目。
有问有答，我已经分门别类了。如果我选择第一个类别 - “全部” - 显示所有问题，或者当我单击另一个类别时，仅显示与该类别相关的问题，其他问题被隐藏。
同样，当我点击一个问题时，相应的答案应该在我切换时显示或隐藏。这就是我想要实现的目标。
现在，当页面加载并且我单击问题时，它们各自的答案会隐藏和显示（切换）- 如我预期的那样工作正常。注意：只有刷新页面才有效
但我的问题是当我点击包括“全部”在内的类别时，显示和隐藏问题的功能消失了。它不适用于任何类别。
换句话说，我点击一个类别，然后点击一个问题来查看答案，切换根本不起作用。
这是我的代码 (faqsearch):
请帮我解决这两个问题：
- 我哪里做错了什么？
- 如何解决？
谢谢！
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>
问题很简单
更改类别时，您是 removing/adding 元素到 DOM。
但是，在您的代码中，您只在加载应用程序时查询页面上的元素一次。
// class selectors
const questions = document.querySelectorAll(".issue-item");
const answers = document.querySelectorAll(".solution-item");
const questionAnswers = document.querySelectorAll(".issues-solutions");
因此，当您更新列表时，您还必须刷新 questions/answer 等的列表：
我做了一个简单的例子（代码中还有其他问题，但这可能会指导你）：
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>
我是初学者，因此通过做项目来学习。这是一个我正在努力解决的常见问题解答项目。
有问有答，我已经分门别类了。如果我选择第一个类别 - “全部” - 显示所有问题，或者当我单击另一个类别时，仅显示与该类别相关的问题，其他问题被隐藏。
同样，当我点击一个问题时，相应的答案应该在我切换时显示或隐藏。这就是我想要实现的目标。
现在，当页面加载并且我单击问题时，它们各自的答案会隐藏和显示（切换）- 如我预期的那样工作正常。注意：只有刷新页面才有效
但我的问题是当我点击包括“全部”在内的类别时，显示和隐藏问题的功能消失了。它不适用于任何类别。
换句话说，我点击一个类别，然后点击一个问题来查看答案，切换根本不起作用。
这是我的代码 (faqsearch):
请帮我解决这两个问题：
- 我哪里做错了什么？
- 如何解决？
谢谢！
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>
问题很简单
更改类别时，您是 removing/adding 元素到 DOM。
但是，在您的代码中，您只在加载应用程序时查询页面上的元素一次。
// class selectors
const questions = document.querySelectorAll(".issue-item");
const answers = document.querySelectorAll(".solution-item");
const questionAnswers = document.querySelectorAll(".issues-solutions");
因此，当您更新列表时，您还必须刷新 questions/answer 等的列表：
我做了一个简单的例子（代码中还有其他问题，但这可能会指导你）：
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>