• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Filter - wykluczanie

0 głosów
71 wizyt
pytanie zadane 17 stycznia w JavaScript, jQuery, AJAX przez ayo1001 Obywatel (1,820 p.)

Cześć,

Mam taki skrypt do filtrowania po tagach:

link

Jak zrobić w nim wykluczanie? W tym momencie działa, że jeżeli znajdzie szukany tag to go pokazuje, a jak zrobić, żeby np. po zaznaczeniu "Blue" i "Green" pokazało tylko jedną wartość, która spełnia oba warunki?

1 odpowiedź

0 głosów
odpowiedź 18 stycznia przez pablop76 Szeryf (97,850 p.)

Coś udało mi się stworzyć, ale nie jestem do tego przekonany. Mimo wszystko jakiś trop

<form id="filter-options">
    <fieldset>
      <legend>filter item</legend>
      <label for="red">red</label>
      <input type="checkbox" id="red">
      <label for="green">green</label>
      <input type="checkbox" id="green">
      <label for="blue">blue</label>
      <input type="checkbox" id="blue">
      <label for="orange">orange</label>
      <input type="checkbox" id="orange">
      <label for="yellow">yellow</label>
      <input type="checkbox" id="yellow">
      </fieldset>
  </form>


<ul id="product-list">
  <li class="red">
    <h2>Red Fire Truck</h2>
  </li>
  <li class="blue">
    <h2>Blue Kite</h2>
  </li>
  <li class="green blue">
    <h2>Green & Blue Parot</h2>
  </li>
  <li class="yellow">
    <h2>Yellow Canary</h2>
  </li>
</ul>
ul{
  list-style: none;
}

label{
  margin-left: 20px;
}
const form = document.getElementById("filter-options");
const input = [...form.querySelectorAll('input')];
const product = document.getElementById("product-list");
const productItems = [...product.querySelectorAll('li')];
//funkcja zwaraca stringa z id zaznaczonych inputów
function inputCheckedId(arrayInput){
  const checkedInput = [];
    arrayInput.forEach(function(el){
    if(el.checked){
      checkedInput.push(el.id);
    }
  })
  return checkedInput.join(" ");
}
form.addEventListener('input',function(){
  //pętla po elementach li porównuje ich klasy (jako string) ze stringiem stworzonym z id inputów
  productItems.forEach(function(el){
  if( el.classList.value == inputCheckedId(input)) {
   el.style.color= "red";
  }
    else{
      el.style.color = "black";
    }
});
});

 

Podobne pytania

0 głosów
2 odpowiedzi 67 wizyt
pytanie zadane 23 grudnia 2018 w JavaScript, jQuery, AJAX przez Bakr Mądrala (6,740 p.)
0 głosów
2 odpowiedzi 128 wizyt
pytanie zadane 11 lutego 2018 w JavaScript, jQuery, AJAX przez macik1423 Początkujący (480 p.)
0 głosów
0 odpowiedzi 32 wizyt
pytanie zadane 4 grudnia 2018 w Systemy operacyjne, programy przez Shiro Stary wyjadacz (10,040 p.)
Porady nie od parady
Wynikowy wygląd pytania, odpowiedzi czy komentarza, różni się od tego zaprezentowanego w edytorze postów. Stosuj więc funkcję Podgląd posta znajdującą się pod edytorem, aby upewnić się, czy na pewno ostateczny rezultat ci odpowiada.Podgląd posta

66,380 zapytań

113,130 odpowiedzi

239,489 komentarzy

46,637 pasjonatów

Przeglądających: 291
Pasjonatów: 10 Gości: 281

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...