Переключение не работает после того, как я классифицировал вопросы

Проблема довольно проста.

При изменении категории вы удаляете/добавляете элемент в 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:[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" />
    <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>

Спасибо @Crocsx! Это сработало как шарм. Я просто этого не понимал. Мне также любопытно, какие еще проблемы в моем коде? Не могли бы Вы сказать? Спасибо. — person erik; 09.10.2020

Код в целом хорош для чистого динамического контента JS, я говорил немного быстро, ахах. Я бы просто сказал, что кроме того факта, что css не выглядит так хорошо на маленьком экране (верхнее меню). также рекомендуется удалить eventListener перед удалением элемента из DOM (вы должны сохранить все события, которые вы добавляете, и очистить их при удалении вопроса onclick FAQ. Я не знаю вашей области, но это может быть полезно stackoverflow .com/questions/6033821/ — person erik; 09.10.2020