Я новичок и поэтому учусь, работая над проектами. Это проект часто задаваемых вопросов, с которым я борюсь.
Есть вопросы и ответы, и я разделил их на категории. Если я выбираю первую категорию — «все» — отображаются все вопросы или когда я нажимаю на другую категорию, отображаются только вопросы, относящиеся к этой категории, а остальные скрываются.
Точно так же, когда я нажимаю на вопрос, соответствующий ответ должен отображаться или скрываться при переключении. Этого я и хотел добиться.
Теперь, когда страница загружается и я нажимаю на вопросы, их соответствующие ответы скрываются и отображаются (переключаются) — работает нормально, как я и ожидал. Примечание. Это работает только при обновлении страницы.
Но моя проблема в том, что когда я нажимаю на категории, включая «все», функциональность отображения и скрытия вопросов исчезает. Не работает ни с одной категорией.
Другими словами, я нажимаю на категорию, а затем на вопрос, чтобы проверить ответ, переключение вообще не работает.
Вот мой код (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:[email protected];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» >All</button> <button class=»nav-btn» type=»button» >New Delhi</button> <button class=»nav-btn» type=»button» >Canberra</button> </nav> <div class=»topics»></div> </div> <!— common issues ends here —> </main> <!— container ends here —> </div> </body>
Спасибо @Crocsx! Это сработало как шарм. Я просто этого не понимал. Мне также любопытно, какие еще проблемы в моем коде? Не могли бы Вы сказать? Спасибо — person erik schedule 09.10.2020
Источник: