Блог

Я создаю страницу блога, чтобы продемонстрировать некоторые из моих проектов. Каждый проект находится внутри div с общим классом, но у всех разные идентификаторы, первый проект — id =»blog-post1″, второй проект — id =»blog-post2″ и так далее. В правой части страницы у меня есть кнопки, которые покажут вам только один из проектов для чтения и скроют другой, он работает просто отлично, см. Код ниже:

 function hideshow(btn) {
    var a = document.querySelectorAll('[id^="blog-post"]');
    var b = document.getElementById(btn);
    a.forEach(a => {
      a.style.display = "none";
    })

    b.style.display = "block";
  }

  function showall() {
    var a = document.querySelectorAll('[id^="blog-post"]');
    a.forEach(a => {
      a.style.display = "block";
    })
  }
 

Вышесказанное работает нормально, но кажется, что это не очень элегантное решение (я очень новичок в этом). Сначала я скрываю все Divs, а затем снова меняю статус отображения нужного мне Div на «блокировать». Возможно, есть способ выполнить querySelectAll для всех идентификаторов, которые начинаются с «blog-post», но кроме того, на который нажал зритель (заданный селектором btn) ?.

Как насчет добавления проверки в цикл, чтобы не скрывать нужный div.

 a.forEach(a => {
  if (a.id != btn) a.style.display = "none";
})