• 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
68 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 (91,510 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 64 wizyt
pytanie zadane 23 grudnia 2018 w JavaScript, jQuery, AJAX przez Bakr Mądrala (6,650 p.)
0 głosów
2 odpowiedzi 117 wizyt
pytanie zadane 11 lutego 2018 w JavaScript, jQuery, AJAX przez macik1423 Początkujący (480 p.)
0 głosów
0 odpowiedzi 27 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

63,406 zapytań

109,671 odpowiedzi

229,148 komentarzy

44,695 pasjonatów

Przeglądających: 307
Pasjonatów: 18 Gości: 289

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.

...