Ćwiczenie "filtrujące" elementy

Question

Hej, mam problem z "filtrowaniem" elementów.

Zrobiłem proste ćwiczenie. Jeżeli kliknę btn A to filtrują mi się elementy A, odklikuje - pojawiają się wszystkie, to jest ok. Problem pojawia się kiedy po kliknięciu w A, chcę przeskoczyć od razu na B, nie odklikując A. Wtedy A znika i pojawiają się elementy B i C. Prośba o wskazówki co moge zrobić

https://codepen.io/patlewpl/pen/ExwVQoL?editors=1010

document
  .querySelector(".a-btn")
  .setAttribute("onclick", "toggle_visibility('a')");
document
  .querySelector(".b-btn")
  .setAttribute("onclick", "toggle_visibility('b')");
document
  .querySelector(".c-btn")
  .setAttribute("onclick", "toggle_visibility('c')");

function toggle_visibility(id) {
  let items = document.querySelectorAll(".item").forEach((item) => {
    item.style.display =
      !item.classList.contains(id) && item.style.display == "block"
        ? "none"
        : "block";
  });
}

<div class="nav">
  <span class="btn a-btn">A</span>
  <span class="btn b-btn">B</span>
  <span class="btn c-btn">C</span>
</div>
<div class="item-cont">
  <div class="item a">A</div>
  <div class="item b">B</div>
  <div class="item b">B</div>
  <div class="item a">A</div>
  <div class="item c">C</div>
  <div class="item c">C</div>
</div>

.nav {
  display: flex;
}

.nav span {
  margin-right: 5px;
}

.item-cont {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  margin-top: 10px;
  width: 65%;
}

.item {
  width: 100px;
  height: 100px;
  background-color: #222;
  color: #fff;
  font-size: 30px;
  text-align: center;
  line-height: 100px;
}

.btn {
  padding: 10px;
  border: 1px solid #222;
  font-size: 15px;
  cursor: pointer;
}

.show {
  display: block;
}

.hide {
  display: none;
}

 

Answer 1

Możesz spróbować z dodatkową zmienną, która zapamięta ostatnio wciśnięty przycisk.

 

przykład

<div class="nav">
  <span class="btn a">A</span>
  <span class="btn b">B</span>
  <span class="btn c">C</span>
</div>
<div class="item-cont">
  <div class="item a">A</div>
  <div class="item b">B</div>
  <div class="item b">B</div>
  <div class="item a">A</div>
  <div class="item c">C</div>
  <div class="item c">C</div>
  <div class="item b">B</div>
  <div class="item c">C</div>
  <div class="item c">C</div>  
</div>

.nav {
  display: flex;
}
.nav span {
  margin-right: 5px;
}
.item-cont {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  margin-top: 10px;
}
.item {
  height: 100px;
  width: 100%;
  background-color: #222;
  color: #fff;
  font-size: 30px;
  text-align: center;
  line-height: 100px;
}
.btn {
  padding: 10px;
  border: 1px solid #222;
  font-size: 15px;
  cursor: pointer;
}

let buttons, items, last_id;

window.addEventListener('load', load);
function load() {  
  buttons = document.querySelectorAll('.btn');
  for (button of buttons)
    button.addEventListener('click', toggleVisibility);

  items = document.querySelectorAll('.item-cont .item');
}

function toggleVisibility(e) {
  const id = e.target.className.replace('btn', '').trim();
  if (last_id == id) {
    for (item of items)
      item.style.display = 'block';
    last_id = '';
  } else {
    for (item of items)
      item.style.display = (item.classList.contains(id)) ? 'block':'none';
    last_id = id;
  }
}

 

Comments

dzięki! dokładnie o to mi chodziło, ale na takie rozwiązanie bym nie wpadł

Answer 2

Hej. Nie wiem po co dałeś w funkcji toggle_visibility(id) warunek item.style.display == "block" - usuń go i dodaj jeszcze zmienną allbuttons, która będzie przechowywać info czy mają być wyświetlone wszystkie buttony:

var allButtons = true;
document
  .querySelector(".a-btn")
  .setAttribute("onclick", "toggle_visibility('a')");
document
  .querySelector(".b-btn")
  .setAttribute("onclick", "toggle_visibility('b')");
document
  .querySelector(".c-btn")
  .setAttribute("onclick", "toggle_visibility('c')");

function toggle_visibility(id) {
  let items = document.querySelectorAll(".item").forEach((item) => {
    item.style.display = (allButtons == true) ? "block" : 
      (item.classList.contains(id)
        ? "block"
        : "none");
  });
  allButtons = (allButtons == true) ? false : true;
}